Home > Article > Web Front-end > Detailed explanation of positioning and navigation position using jQuery

Detailed explanation of positioning and navigation position using jQuery

小云云Original: 2018-01-18 16:46:151730browse

This article mainly introduces the positioning and navigation position effect based on jQuery in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

When the scroll bar scrolls to the content area, the side navigation bar is positioned on the screen, stops moving, and clicks on the navigation bar to jump to the location of the content;

<!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 p{
      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 p{
      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="">
  <p class="bottom">
    <p class="left">
      <p class="one leftp" id="one">
        一
      </p>
      <p class="conOne leftp" id="two">
          二 
      </p>
      <p class="leftp" id="three ">
        三
      </p>
      <p class="leftp" id="four">
        四
      </p>
    </p>
    <p class="nav">
      <p class="one navp">one</p>
      <p class="two navp">two</p>
      <p class="three navp">three</p>
      <p class="four navp">four</p>
    </p>
  </p>
  <script src="jquery.js"></script>
  <script>
    $(window).scroll(function(e){
      console.log($(window).scrollTop());
      if ($(window).scrollTop() >$(&#39;#one&#39;).offset().top) {
        $(&#39;.nav&#39;).css({&#39;position&#39;:&#39;fixed&#39;});
      console.log(&#39;ss&#39;);
      } else{
        $(&#39;.nav&#39;).css({&#39;position&#39;:&#39;absolute&#39;});
      }
    })
    $(&#39;.nav p&#39;).click(function(){
      var i = $(&#39;.navp&#39;).index(this);
      var x = $(&#39;.leftp&#39;).eq(i).offset().top;
      $(&#39;html, body&#39;).animate({scrollTop:x+&#39;px&#39;},500);
    })
  </script>
</body>
</html>

Related recommendations:

About jQuery to achieve positioning navigation effect

##Fullpage.js fixed navigation bar-implementation of positioning navigation bar_javascript skills

Detailed explanation of navigation bar implementation example in Bootstrap

The above is the detailed content of Detailed explanation of positioning and navigation position using jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of throttling and anti-shake debounce of javascript functionNext article：Detailed explanation of throttling and anti-shake debounce of javascript function

See more

Detailed explanation of positioning and navigation position using jQuery

Related articles