基于jQuery实现定位导航位置效果

2019-11-19 14:56:00

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

当滚动条滚动到内容区域的时候，侧边导航条定位到屏幕，不再动，并且点击导航条跳转到内容所在的位置；

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <style>    *{      padding: 0;      margin: 0;    }    .left{      float: left;      padding: 0 0 328px 0;    }    .left div{      width: 800px;      height: 300px;      line-height: 300px;      text-align: center;      font-size: 30px;      background: gray;      margin: 10px 0;    }    .nav{      position: absolute;      right:20px;      top: 20px;    }    .nav div{      width: 100px;      height: 80px;      line-height: 80px;      text-align: center;      background: pink;      margin: 10px 0;      cursor: pointer;    }    .bottom{      overflow: hidden;      width: 100%;      position: relative;    }  </style>  <title>Document</title></head><body>  <img style="width:100%" src="o_1bsmo1kpn1hp61bm0176i1bk618uo9.jpg" alt="">  <div class="bottom">    <div class="left">      <div class="one leftDiv" id="one">        一      </div>      <div class="conOne leftDiv" id="two">          二       </div>      <div class="leftDiv" id="three ">        三      </div>      <div class="leftDiv" id="four">        四      </div>    </div>    <div class="nav">      <div class="one navDiv">one</div>      <div class="two navDiv">two</div>      <div class="three navDiv">three</div>      <div class="four navDiv">four</div>    </div>  </div>  <script src="jquery.js"></script>  <script>    $(window).scroll(function(e){      console.log($(window).scrollTop());      if ($(window).scrollTop() >$('#one').offset().top) {        $('.nav').css({'position':'fixed'});      console.log('ss');      } else{        $('.nav').css({'position':'absolute'});      }    })    $('.nav div').click(function(){      var i = $('.navDiv').index(this);      var x = $('.leftDiv').eq(i).offset().top;      $('html, body').animate({scrollTop:x+'px'},500);    })  </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：javascript函数的节流[throttle]与防抖[debounce]

下一篇：详解如何使用PM2将Node.js的集群变得更加容易