jquery页面滚动显示浮动菜单栏锚点定位效果
生活随笔
收集整理的這篇文章主要介紹了
jquery页面滚动显示浮动菜单栏锚点定位效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title>jQuery頁面滾動浮動導航切換代碼 - xw素材網</title>
7 <link rel="stylesheet" type="text/css" href="css/reset.css">
8 <link rel="stylesheet" type="text/css" href="css/menu.css">
9 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
10 <script type="text/javascript" src="js/menu.js"></script>
11 </head>
12 <body>
13 <div id="menu">
14 <ul>
15 <li><a href="#item1" class="cur">One</a></li>
16 <li><a href="#item2">Two</a></li>
17 <li><a href="#item3">Three</a></li>
18 <li><a href="#item4">Four</a></li>
19 <li><a href="#item5">Fir</a></li>
20 </ul>
21 </div>
22 <div id="content">
23 <div class="item" id="item1">
24 <h1>1F</h1>
25 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
26 <p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
27 <p>來源：<a href="http://www.xwcms.net/" target="_blank">xw素材網</a></p>
28 </div>
29 </div>
30 <div class="item" id="item2">
31 <h1>2F</h1>
32 </div>
33 <div class="item" id="item3">
34 <h1>3F</h1>
35 </div>
36 <div class="item" id="item4">
37 <h1>4F</h1>
38 </div>
39 <div class="item" id="item5">
40 <h1>5F</h1>
41 </div>
42 </div>
43 </body>
44 </html>
?
menu.js
?
1 $(document).ready(function(){ 2 $(window).scroll(function(){ 3 var top = $(document).scrollTop(); //定義變量，獲取滾動條的高度 4 var menu = $("#menu"); //定義變量，抓取#menu 5 var items = $("#content").find(".item"); //定義變量，查找.item 6 7 var curId = ""; //定義變量，當前所在的樓層item #id 8 9 items.each(function(){ 10 var m = $(this); //定義變量，獲取當前類 11 var itemsTop = m.offset().top; //定義變量，獲取當前類的top偏移量 12 if(top > itemsTop-100){ 13 curId = "#" + m.attr("id"); 14 }else{ 15 return false; 16 } 17 }); 18 19 //給相應的樓層設置cur,取消其他樓層的cur 20 var curLink = menu.find(".cur"); 21 if( curId && curLink.attr("href") != curId ){ 22 curLink.removeClass("cur"); 23 menu.find( "[href=" + curId + "]" ).addClass("cur"); 24 } 25 // console.log(top); 26 }); 27 });?
menu.css
1 #content{width: 100%;height: auto; margin: 0 auto;} 2 #content div{width: 100%; height: 868px; margin: 0 auto;} 3 #content div#item1{background-color: #00ff00} 4 #content div#item2{background-color: #279756} 5 #content div#item3{background-color: #2ce3e5} 6 #content div#item4{background-color: #5e57e7} 7 #content div#item5{background-color: #ca61ae} 8 #content div h1{font-size: 36px; color: #fff;} 9 10 #menu{width: 88px;height: auto; position: fixed;top: 50%;right: 15px;margin-top: -135px;} 11 #menu ul{display: block;list-style: none} 12 #menu ul li a{width: 88px; height: 54px; line-height: 54px; text-align: center;background-color: #fff;color: #32c96a;display: block} 13 #menu ul li a:hover,#menu ul li a.cur{background-color: #32c92a;color: #fff;}?
reset.css
1 *[hidefocus]{outline:none;} 2 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;} 3 fieldset,img,html,body,iframe{border:0;} 4 table{border-collapse:collapse;border-spacing:0;} 5 li{list-style:none;} 6 h1,h2,h3,h4,h5,h6{font-weight:bold;font-size:100%;} 7 caption,th{font-weight:normal;font-style:normal;text-align:left;} 8 em,strong{font-weight:bold;font-style:normal;} 9 10 body,textarea,select,input{font-family:helvetica,arial,simsun,sans-serif;font-size:14px;color:#000;} 11 body{background-color:#fff;} 12 a,button{cursor:pointer;} 13 a{text-decoration:none;color:#000; outline: none;} 14 a:hover{text-decoration:none;} 15 html,body{width:100%;height:100%;} 16 html{overflow:auto;overflow-y:scroll;}?
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的jquery页面滚动显示浮动菜单栏锚点定位效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ios怎么下美服刺激战场
- 下一篇： 为什么xs没有双卡双待(汉典为字的基本解