Maison > interface Web > js tutoriel > le corps du texte

Comment obtenir un effet de défilement au sol en utilisant jquery

亚连
Libérer: 2018-06-14 15:03:08
original
1602 Les gens l'ont consulté

Cet article présente principalement jquery pour réaliser l'effet de défilement au sol en détail, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage avec vous le jquery pour réaliser le défilement au sol. effet. Le code spécifique affiché est pour votre référence. Le contenu spécifique est le suivant

html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <link rel="stylesheet" href="css/base.css" rel="external nofollow" > 
  <style> 
    #header,#f1,#f2,#f3{ 
      width: 80%; 
      height: 500px; 
      background: yellow; 
      margin-left: 10%; 
      margin-top: 50px; 
    } 
    #f1{ 
      background: green; 
    } 
    #f2{ 
      background: red; 
    } 
    #f3{ 
      background: blue; 
    } 
    #lift{ 
      position: fixed; 
      top: 280px; 
      display: none; 
    } 
    .lift_btn{ 
      display: inline-block; 
      width: 50px; 
      height: 50px; 
      border: 1px solid #000; 
    } 
    .hover{ 
      background: red; 
    } 
  </style> 
</head> 
<body> 
  <p id="header"></p> 
  <p class="floor" id="f1"> 
    <p>第一层</p> 
  </p> 
  <p class="floor" id="f2"> 
    <p>第二层</p> 
  </p> 
  <p class="floor" id="f3"> 
    <p>第三层</p> 
  </p> 
  <p id="lift"> 
    <ul> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>1</span> 
        </a> 
      </li> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>2</span> 
        </a> 
      </li> 
      <li class="lift_item"> 
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> 
          <span>3</span> 
        </a> 
      </li> 
    </ul> 
  </p> 
 
  <script src="js/jquery.min.js"></script> 
  <script src="js/floor.js"></script> 
</body> 
</html>
Copier après la connexion

js:

(()=>{ 
  var $lift=$("#lift"); 
  $(window).scroll(()=>{ 
    var scrollTop=$(&#39;html,body&#39;).scrollTop(); 
    var $f1=$("#f1"); 
    var offsetTop=$f1.offset().top; 
    if(offsetTop<scrollTop+innerHeight/2) 
      $lift.fadeIn(500); 
    else 
      $lift.fadeOut(500); 
    var $floors=$(".floor"); 
    $floors.each((i,elem)=>{ 
      var $f=$(elem); 
      if($f.offset().top<scrollTop+innerHeight/2) 
        $lift.find(".lift_item:eq("+i+")").addClass("hover").siblings().removeClass("hover"); 
    }); 
  }); 
 
  $lift.children("ul").on("click","li",function(){ 
    var $li=$(this); 
    var i=$li.index(); 
    var $fi=$(".floor:eq("+i+")"); 
    var offsetTop=$fi.offset().top; 
    $("html").animate({ 
      scrollTop:offsetTop-60 
    },500) 
  }) 
})();
Copier après la connexion

Ce qui précède est ce que j'ai. compilé pour tout le monde. J'espère qu'à l'avenir, cela sera utile à tout le monde.

Articles connexes :

Comment implémenter des classes js à l'aide de la bibliothèque tangram.js

Comment implémenter l'héritage combiné parasite à l'aide de JavaScript

Comment implémenter le chargement différé des images autres que le premier écran dans JS

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal