<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery滚动面板的实现</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <style type="text/css"> *{padding: 0; margin: 0;list-style: none;} #wrap{background: red; width: 500px; height: 3000px; margin: 0 auto;} h2{margin-bottom: 1000px;} #nav{width: 50px;height: 150px; border: 1px solid blue; position: fixed;bottom: 0;right: 0;} #nav li{border-bottom: 1px solid blue; height: 50px; text-align: center; line-height: 50px; font-size: 30px;} #nav li a{text-decoration: none;} /*预定义样式，表示所处的楼层*/ .current{background:blue;} .current a{color: white;} </style> </head> <script type="text/javascript"> $(function(){ $("#nav li").hover(function() { $(this).addClass('current'); }, function() { $(this).removeClass('current'); }); //通过判断滚动条的高度和楼层高度来制定样式。 $(window).scroll(function() { var top = $(document).scrollTop(); //第二个标题1022，第三个标题2048; //用于添加样式的函数。 function addStyle(index){ $("#nav li").removeClass(); $("#nav li:eq("+index+")").addClass('current'); } if (top<=1022) { addStyle(0); }else if (top>1022 && top<=2048) { addStyle(1); }else if (top>2048) { addStyle(2); }; }); }); </script> <body> <div id="wrap"> <h2 class="num1" id="target1">这是第一个标题</h2> <h2 class="num2" id="target2">这是第二个标题</h2> <h2 class="num3" id="target3">这是第三个标题</h2> </div> <ul id="nav"> <li class="current"><a href="#target1">1F</a></li> <li><a href="#target2">2F</a></li> <li><a href="#target3">3F</a></li> </ul> </body> </html>