首页 > 代码库 > jquery页面滚动显示浮动菜单栏锚点定位效果

jquery页面滚动显示浮动菜单栏锚点定位效果

2024-10-09 09:44:01   217人阅读

 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="http://www.mamicode.com/+ 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页面滚动显示浮动菜单栏锚点定位效果


联系
我们