JQuery 錨點連接屏幕滾動


直接上代碼:

<!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>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;    </p>

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;    </p>
</div>
<div id="a2">測試</div>

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;    </p>
</div>
<div id="history">

    <p>history內容</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;    </p>
</div>
<div id="a3">測試</div>
<div id="history">

    <p>history內容</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;    </p>

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;    </p>
</div>
<div id="a4">測試</div>

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;    </p>

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;    </p>
</div>
<div id="a5">測試
<p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;    </p>

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;    </p>

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;    </p>
</div>
</body></html>

解決隨屏幕滾動問題,希望對大家有幫助。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM