À propos de jQuery pour obtenir des effets de positionnement et de navigation-js tutoriel-php.cn

À propos de jQuery pour obtenir des effets de positionnement et de navigation

小云云

Libérer： 2017-12-21 09:16:26

original

1637 Les gens l'ont consulté

Cet article présente principalement en détail l'effet de positionnement et de position de navigation basé sur jQuery et partage le code spécifique pour l'affichage d'images Android Jiugongge, qui a une certaine valeur de référence. J'espère que cela pourra vous aider. .

Lorsque la barre de défilement défile jusqu'à la zone de contenu, la barre de navigation latérale est positionnée sur l'écran et s'arrête de bouger, et cliquez sur la barre de navigation pour accéder à l'emplacement du contenu

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

Copier après la connexion

Recommandations associées :

Barre de navigation fixe Fullpage.js - Implémentation des compétences de barre de navigation de positionnement_javascript

Positionnement backend – Dois-je utiliser PHP ou Java pour implémenter la fonction de positionnement et de navigation dans le cloud ?

Utiliser jQuery pour obtenir un effet de barre de navigation fixe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!