About jQuery to achieve positioning and navigation effects-JS Tutorial-php.cn

About jQuery to achieve positioning and navigation effects

小云云

Release： 2017-12-21 09:16:26

Original

1653 people have browsed it

This article mainly introduces the positioning and navigation position effect based on jQuery in detail, and shares the specific code for Android Jiugongge picture display, which 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>

Copy after login

Related recommendations:

Fullpage.js fixed navigation bar-implementing positioning navigation bar_javascript skills

Background positioning- Should I use PHP or Java to implement positioning and navigation functions in the cloud?

Use jQuery to achieve fixed navigation bar effect

The above is the detailed content of About jQuery to achieve positioning and navigation effects. For more information, please follow other related articles on the PHP Chinese website!