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>
js:
(()=>{ var $lift=$("#lift"); $(window).scroll(()=>{ var scrollTop=$('html,body').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) }) })();
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!