Detaillierte Erläuterung der Positionierung und Navigationsposition mit jQuery-js-Tutorial-php.cn

Detaillierte Erläuterung der Positionierung und Navigationsposition mit jQuery

小云云

Freigeben： 2018-01-18 16:46:15

Original

1735 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den Positionierungs- und Navigationspositionseffekt basierend auf jQuery vor. Ich hoffe, dass er jedem helfen kann.

Wenn die Bildlaufleiste zum Inhaltsbereich scrollt, wird die seitliche Navigationsleiste auf dem Bildschirm positioniert und stoppt ihre Bewegung. Klicken Sie auf die Navigationsleiste, um zur Position des Inhalts zu springen 🎜>

Verwandte Empfehlungen:

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

Nach dem Login kopieren

Über jQuery zur Implementierung des Positionierungsnavigationseffekts

Fullpage.js korrigierte Navigationsleisten-Implementierung Positionierung der Navigationsleiste_ JavaScript-Kenntnisse

Detaillierte Erläuterung des Bootstrap-Navigationsleisten-Implementierungsbeispiels

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Positionierung und Navigationsposition mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!