jq实现企业定位式导航

来源：互联网发布：json是什么编辑：程序博客网时间：2024/06/15 05:54
完整代码如下：
<!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><div style="height:200px;width:100%;"></div><div 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></div><div 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></div><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*500if($(window).scrollTop()>i && $(window).scrollTop()<i+500){$(".nav ul li").eq(x).addClass("active").siblings().removeClass("active")}}})</script></body></html>
阅读全文
0 0