jquery页面滚动显示浮动菜单栏锚点定位效果
Posted 求知若渴 虚心若愚
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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页面滚动显示浮动菜单栏锚点定位效果的主要内容，如果未能解决你的问题，请参考以下文章
URL 地址栏锚点 window location hash 使用方法
URL 地址栏锚点 window location hash 使用方法