本文实例为大家分享了jquery实现企业定位式导航的具体代码,供大家参考,具体内容如下
完整代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;风格类型=" text/css "比;
*{保证金:0;填充:0;}
.nav{宽度:100%;位置:绝对;最高:150 px;}
.nav ul{宽度:1200 px;高度:50 px;保证金:0汽车;背景:# ccc;}
李.nav ul{宽度:150 px;高度:50 px;行高:50 px; text-align:中心;list-style:没有,浮动:左;游标:指针;}
.nav ul李:悬停{背景:# 666;}
李.nav ul{颜色:# 000;字体大小:18 px;文字修饰:没有;}
.nav .active{背景:# 666;}
.cont{宽度:1200 px;高度:4500 px;保证金:0汽车;}
.cont ol{宽度:1200 px;高度:4500 px;保证金:0汽车;}
李.cont ol{宽度:1200 px;高度:500 px; list-style:没有;}
李.cont ol p{颜色:# 000;字体大小:48 px;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div祝辞& lt;/div>
& lt; div类="导航"比;
& lt; ul>
& lt;李类="活跃"祝辞page1
& lt; li> page2
& lt; li> page3
& lt; li> page4
& lt; li> page5
& lt; li> page6
& lt; li> page7
& lt; li> page8
& lt;/ul>
& lt;/div>
& lt; div类=白狻北?
& lt; ol>
& lt;李祝辞& lt; p> page1 & lt;/li>
& lt;李祝辞& lt; p> page2 & lt;/li>
& lt;李祝辞& lt; p> page3 & lt;/li>
& lt;李祝辞& lt; p> page4 & lt;/li>
& lt;李祝辞& lt; p> page5 & lt;/li>
& lt;李祝辞& lt; p> page6 & lt;/li>
& lt;李祝辞& lt; p> page7 & lt;/li>
& lt;李祝辞& lt; p> page8 & lt;/li>
& lt;/ol>
& lt;/div>
& lt;脚本type=" text/javascript " src=" http://code.jquery.com/jquery-2.1.1.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
$ ("。nav ul李”).click(函数(){
var指数=$ ().index ();
var=150 +指数* 501 +“px”
$ (html、身体).animate ({scrollTop:我},500)
}）
$(窗口).scroll(函数(){
if($(窗口).scrollTop()在150年){
$ (" .nav ") . css({“位置”:“固定”,“顶”:“0 px”})
}
其他{
$ (" .nav ") . css({“位置”:“绝对”、“顶”:“150 px”})
}
(var x=0; x<8; x + +) {
var=150 + x * 500
if($(窗口).scrollTop()在我,,$(窗口).scrollTop () & lt;我+ 500){
$ ("。nav ul李”).eq (x) .addClass(“活跃”).siblings () .removeClass(“活跃的”)}
}
}）
& lt;/script>
& lt;/body>
& lt;/html>之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
