Maison > Article > interface Web > JS implémente la barre de navigation de positionnement
Cette fois, je vais vous proposer JS pour implémenter une barre de navigation de positionnement. Quelles sont les précautions pour que JS implémente une barre de navigation de positionnement. Voici un cas pratique, jetons un oeil.
Le code complet est le suivant :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> *{margin:0;padding:0;} .nav{width:100%;position:absolute;top:150px;} .nav ul{width:1200px;height:50px;margin:0 auto;background:#ccc;} .nav ul li{width:150px;height:50px;line-height:50px;text-align:center;list-style:none;float:left;cursor:pointer;} .nav ul li:hover{background:#666;} .nav ul li a{color:#000;font-size:18px;text-decoration:none;} .nav .active{background:#666;} .cont{width:1200px;height:4500px;margin:0 auto;} .cont ol{width:1200px;height:4500px;margin:0 auto;} .cont ol li{width:1200px;height:500px;list-style:none;} .cont ol li p{color:#000;font-size:48px;} </style> </head> <body> <p style="height:200px;width:100%;"></p> <p class="nav"> <ul> <li class="active">page1</li> <li>page2</li> <li>page3</li> <li>page4</li> <li>page5</li> <li>page6</li> <li>page7</li> <li>page8</li> </ul> </p> <p class="cont"> <ol> <li style="background:#aaa"><p>page1</p></li> <li style="background:#999"><p>page2</p></li> <li style="background:#666"><p>page3</p></li> <li style="background:#333"><p>page4</p></li> <li style="background:#bbb"><p>page5</p></li> <li style="background:#aaa"><p>page6</p></li> <li style="background:#ccc"><p>page7</p></li> <li style="background:#000"><p>page8</p></li> </ol> </p> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> $(".nav ul li").click(function(){ var index=$(this).index(); var i=150+index*501+'px' $("html,body").animate({scrollTop:i},500) }) $(window).scroll(function(){ if($(window).scrollTop()>150){ $(".nav").css({"position":"fixed","top":"0px"}) } else{ $(".nav").css({"position":"absolute","top":"150px"}) } for(var x=0;x<8;x++){ var i=150+x*500 if($(window).scrollTop()>i && $(window).scrollTop()<i+500){ $(".nav ul li").eq(x).addClass("active").siblings().removeClass("active")} } }) </script> </body> </html>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !
Lecture recommandée :
Comment créer un effet de pagination avec jquery
Comment ajouter et supprimer des menus sur les côtés gauche et droit avec JS
Comment encapsuler le code animate.css avec jQuery
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!