Heim > Artikel > Web-Frontend > So implementieren Sie die Positionierungsnavigation mithilfe von JQuery
In diesem Artikel wird hauptsächlich die Wirkung von JQuery zur Realisierung der Unternehmenspositionierungsnavigation vorgestellt
Das Beispiel dieses Artikels teilt den spezifischen Code von JQuery zur Realisierung der Unternehmenspositionierungsnavigation als Referenz. Der spezifische Inhalt lautet wie folgt:
Der vollständige Code lautet wie folgt:
<!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>
Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
Verwenden von jQuery zum Kapseln von animate.css (ausführliches Tutorial)
vue-cli-Konfigurationsdatei (ausführliches Tutorial)
So implementieren Sie einen JSON-Baum mit Vue2.x
Tutorial zur Installation und Verwendung von CLI in Angular4
Verwenden von JS zum Implementieren der Bildwechseluhr (ausführliches Tutorial)
Implementieren der DOM-Attributbindung in Angular4
Wie man es schreibt unter Verwendung der JS-Multiplikationstabelle
So implementieren Sie die HTML-Attributbindung in Angular4
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Positionierungsnavigation mithilfe von JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!