话不多说，请看代码：

nbsp;html>

  
    <meta>
    <meta>
    <title>38demo</title>
    <link>
    <style>
      html,body{
        width:100%;
        height:100%;
      }
      .title{
        width:100%;
        margin-bottom:20px;
        background: #fff;
      }
      .titleTap{
        position:fixed;
        left:0;
        top:0;
      }
      .a1{
        margin-top:20px;
      }
      .title li{
        width:33%;
        float:left;
        text-align: center;
      }
      .content{
        text-align: center;
        margin-top:20px;
        z-index:100;
      }
    </style>
  
  
    <!--other-->
    <p>
      </p>

        
• 1
        
• 2
        
• 3
        
• 4
        
• 5
        
• 6
        
• 7
        
• 8
        
• 9
        
• 10
      

              

      
• 1
      
• 2
      
• 3
    

         

      
• 11
      
• 13
      
• 14
      
• 21
      
• 22
      
• 23
    

    

      
• 21
      
• 22
      
• 23
      
• 21
      
• 22
      
• 23
      
• 21
      
• 22
      
• 23
      
• 21
      
• 22
      
• 23
      
• 21
      
• 22
      
• 23
      
• 21
      
• 22
      
• 23
      
• 21
      
• 22
      
• 23
      
• 21
      
• 22
      
• 23
    

    

      
• 31
      
• 32
      
• 33
      
• 21
      
• 22
      
• 23
      
• 31
      
• 32
      
• 33
      
• 21
      
• 22
      
• 23
      
• 31
      
• 32
      
• 33
      
• 21
      
• 22
      
• 23
      
• 31
      
• 32
      
• 33
      
• 21
      
• 22
      
• 23
      
• 31
      
• 32
      
• 33
      
• 21
      
• 22
      
• 23
      
• 31
      
• 32
      
• 33
      
• 21
      
• 22
      
• 23
    

    <script></script>     <script> function nav(){ var height=0; height = $(".topHeight").height(); $(window).scroll(function() { var w = $("body").scrollTop() || $(document).scrollTop(); //获取滚动值 if(w > height) { $(".title").addClass("titleTap"); } else if(w <= 0){ $(".title").removeClass("titleTap") }else{ $(".title").removeClass("titleTap") } }); } nav(); $(function() { $(".title li").click(function() { var index = $(this).index(); var offsetH = $(".content").eq(index).offset().top; console.log(index); console.log(offsetH); $("body").animate({ scrollTop: offsetH-20, }, 500); }) }) </script>   

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网

更多js实现导航吸顶效果相关文章请关注PHP中文网！