基于jQuery實現(xiàn)定位導(dǎo)航位置效果

更新時間：2017年11月15日 11:05:04 作者：賽賽大人

這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)定位導(dǎo)航位置效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android九宮格圖片展示的具體代碼，供大家參考，具體內(nèi)容如下

當(dāng)滾動條滾動到內(nèi)容區(qū)域的時候，側(cè)邊導(dǎo)航條定位到屏幕，不再動，并且點擊導(dǎo)航條跳轉(zhuǎn)到內(nèi)容所在的位置；

<!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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: