This article mainly introduces the effect of jquery to realize enterprise positioning navigation
The example of this article shares the specific code of jquery to realize enterprise positioning navigation for your reference. The specific content is as follows
The complete code is as follows:
<!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>
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Using jQuery to encapsulate animate.css (detailed tutorial)
##vue-cli configuration file (detailed tutorial)
How to implement JSON tree using Vue2.x
Tutorial on the installation and use of CLI in Angular4
Use JS to implement picture changing clock (detailed tutorial)
Implement DOM attribute binding in Angular4
How to write using JS Multiplication table
How to implement HTML attribute binding in Angular4
The above is the detailed content of How to implement positioning navigation using jquery. For more information, please follow other related articles on the PHP Chinese website!