标签：
现在的网站大部分是一个页面会展示很多信息，避免二次点击，可以减少信息的流失。今天写了一个，先看一下最终的效果图
是用jquery来实现的，代码非常简单，适合初学者学习。
首先还是界面html：
1 <div class="nav"> 2 <ul> 3 <li><a href="#floor1" class="current">FLOOR_1</a></li> 4 <li><a href="#floor2">FLOOR_2</a></li> 5 <li><a href="#floor3">FLOOR_3</a></li> 6 <li><a href="#floor4">FLOOR_4</a></li> 7 <li><a href="#floor5">FLOOR_5</a></li> 8 </ul> 9 </div> 10 <div class="floor" id="floor1"> 11 <p>这是第一个板块</p> 12 <ul> 13 <li><img src="01.jpg"></li> 14 <li><img src="01.jpg"></li> 15 <li><img src="01.jpg"></li> 16 <li><img src="01.jpg"></li> 17 <li><img src="01.jpg"></li> 18 <li><img src="01.jpg"></li> 19 <li><img src="01.jpg"></li> 20 <li><img src="01.jpg"></li> 21 <li><img src="01.jpg"></li> 22 </ul> 23 </div>
这里只列出导航部分和第一个板块的html，其他板块的同板块1.
这里需要注意的一点是超链接的地址是id，可以在同一个页面点击然后链接到id的那个部分。
1 *{margin: 0;padding: 0;} 2 .floor{ 3 border:1px solid #69f; 4 width: 880px; 5 height: 600px; 6 margin: 50px auto; 7 } 8 li{list-style: none;} 9 img{ 10 width: 250px; 11 float:left; 12 border: 1px dashed #f69; 13 margin: 20px; 14 } 15 p{font-size: 20px;font-family: 微软雅黑;color: #c33;padding: 5px 20px;} 16 .nav{ 17 position: fixed; 18 width: 120px; 19 left:1120px; 20 top:200px; 21 } 22 .nav li a{ 23 padding: 20px; 24 list-style: none; 25 text-align: center; 26 color: #318BFF; 27 cursor: pointer; 28 } 29 .nav li a{text-decoration: none;display: block;} 30 .nav .current{ 31 background-color: #50CA65; 32 color: #ff0; 33 } 34 .nav li a:hover{background-color: #50CA65;color:#ff0;}
这是样式部分，不做介绍了，只要注意一下 .current即可。
下面是重要部分，jquery的部分，首先要引入jquery库
1 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 2 <script type="text/javascript"> 3 $(document).ready(function(){ 4 $(window).scroll(function(){ 5 var floors=$(".floor"); 6 var top=$(document).scrollTop(); 7 var currentID = "";//滚动条现在所在位置的floor id 8 floors.each(function(){ 9 var T=$(this); 10 if(top>T.offset().top-350){ //注意：T.offset().top代表每一个floor的顶部位置 11 currentID="#"+T.attr("id"); 12 } 13 else{ 14 return false; 15 } 16 }); 17 var currentLink=$(".nav").find(".current"); 18 if(currentID && currentLink.attr("href")!=currentID){ 19 currentLink.removeClass("current"); 20 $(".nav").find("[href="+currentID+"]").addClass("current"); 21 } 22 }); 23 }); 24 </script>
思想就是当检测到当前滚动的位置大于指定的px值，就把导航的超链接的src地址进行切换，然后把css中的样式.current添加上去。
标签：
原文地址：http://www.cnblogs.com/hsprout/p/5055100.html
