jQuery+CSS3實現仿花瓣網固定頂部位置帶懸浮效果的導航菜單

2019-11-20 08:55:31

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery+CSS3實現仿花瓣網固定頂部位置帶懸浮效果的導航菜單。分享給大家供大家參考，具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>【推薦】Jquery+CSS3仿花瓣網固定頂部位置懸浮的導航菜單</title><style type="text/css">body,h1,ul{margin:0;}ul li{list-style-type:none;}#header{width:100%;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;text-align:center;}h1{padding:10px 0;color:#D74452;}.nav{width:1000px;background:#fff;margin:20px auto 0;border:solid 1px #ccc;zoom:1;border-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,0.1);color:#D74452;}.nav_scroll{position:fixed;width:100%;margin:0;left:0;top:0;}.nav:after{content:"";display:block;height:0;clear:both;visibility:hidden;}.nav ul li{float:left;margin:0 20px;height:30px;line-height:30px;}.nav ul li a{cursor:pointer;}.nav ul li a:hover{text-decoration:underline;}h2{height:400px;line-height:400px;}</style><script src="jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){ var topMain=$("#header").height()+20//是頭部的高度加頭部與nav導航之間的距離 var nav=$(".nav"); $(window).scroll(function(){ if ($(window).scrollTop()>topMain){//如果滾動條頂部的距離大于topMain則就nav導航就添加類.nav_scroll，否則就移除  nav.addClass("nav_scroll"); }else{  nav.removeClass("nav_scroll"); } });})</script></head><body><div id="header"><h1>花瓣</h1></div><div class="nav">  <ul>    <li><a>關注</a></li>    <li><a>最新</a></li>    <li><a>最熱</a></li>    <li><a>視頻</a></li>    <li><a>家居</a></li>    <li><a>旅行</a></li>  </ul></div><div style="background:#f9f9f9;color:#000;" id="cont">  <h2>1</h2>  <h2>2</h2>  <h2>3</h2>  <h2>4</h2>  <h2>5</h2>  <h2>6</h2>  <h2>7</h2>  <h2>8</h2>  <h2>1</h2>  <h2>2</h2>  <h2>3</h2>  <h2>4</h2>  <h2>5</h2>  <h2>6</h2>  <h2>7</h2>  <h2>8</h2>  <h2>1</h2>  <h2>2</h2>  <h2>3</h2>  <h2>4</h2>  <h2>5</h2>  <h2>6</h2>  <h2>7</h2>  <h2>8</h2>  <h2>1</h2>  <h2>2</h2>  <h2>3</h2>  <h2>4</h2>  <h2>5</h2>  <h2>6</h2>  <h2>7</h2>  <h2>8</h2>  <h2>1</h2>  <h2>2</h2>  <h2>3</h2>  <h2>4</h2>  <h2>5</h2>  <h2>6</h2>  <h2>7</h2>  <h2>8</h2></div></body></html>

運行效果圖如下：