直接上代碼:
<!DOCTYPE html> <html class="no-js" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <script src="jquery1_files/jquery.js"></script> </head> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ //為頁面添加頁面滾動監聽事件 var wst = $(window).scrollTop() //滾動條距離頂端值 for (i=1; i<6; i++){ //加循環 if($("#a"+i).offset().top<=wst){ //判斷滾動條位置 $('#nav a').css("background-color","white"); //清除c類 $("#a"+i+i).css("background-color","red"); //給當前導航加c類 } } }) $('#nav a').click(function(){ $('#nav a').css("background-color","white");//清除c類 $(this).css("background-color","red");//給當前導航加c類 }); }); </script> <div id="nav" style="position:fixed;width:500px;height:200px; top:10px;right:10px;" > <a id="a11" href="#a1" class="c">書籍目錄</a> <a id="a22" href="#a2">作品試讀</a> <a id="a33" href="#a3">購買須知</a> <a id="a44" href="#a4">注意事項</a> <a id="a55" href="#a5">用戶點評</a> </div> <br /><br /> 頁面結構如下: <div id="a1">測試</div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="a2">測試</div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="history"> <p>history內容</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="a3">測試</div> <div id="history"> <p>history內容</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="a4">測試</div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="a5">測試 <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </body></html>
解決隨屏幕滾動問題,希望對大家有幫助。