zoukankan      html  css  js  c++  java
  • 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;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>

    解决随屏幕滚动问题,希望对大家有帮助。

  • 相关阅读:
    poj 2485 Highways 最小生成树
    hdu 3415 Max Sum of MaxKsubsequence
    poj 3026 Borg Maze
    poj 2823 Sliding Window 单调队列
    poj 1258 AgriNet
    hdu 1045 Fire Net (二分图匹配)
    poj 1789 Truck History MST(最小生成树)
    fafu 1181 割点
    减肥瘦身健康秘方
    人生的问题
  • 原文地址:https://www.cnblogs.com/ljl0513/p/4819944.html
Copyright © 2011-2022 走看看