本文实例为大家分享了js网页定位导航的具体代码,供大家参考,具体内容如下
一个循环判断当前滚动到的位置,另一个循环遍历导航条判断其id是否与滚动到的位置相同
效果如图:
实现代码:
& lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n”比;
& lt;元charset=皍tf - 8”比;
& lt; title>地狗购物网,网页定位导航效果& lt;/title>
& lt;风格类型=" text/css "比;
* {
保证金:0;
填充:0;
}
身体{
字体大小:12 px;
行高:1.7;
}
李{
list-style:没有;
}
#内容{
宽度:800 px;
保证金:0汽车;
填充:20 px;
}
#内容h2 {
颜色:# 0088 bb;
}
#内容.item {
填充:20 px;
margin-bottom: 20 px;
边界:1 px虚线# 0088 bb;
}
#内容.item h3 {
字体大小:12 px;
粗细:大胆的;
边界底部:2 px固体# 0088 bb;
margin-bottom: 10 px;
}
李#内容.item {
显示:内联;
margin-left: 10 px;
}
#内容.item李img {
宽度:230 px;
身高:230 px;
边界:没有;
}
#{菜单
位置:固定;
前:100像素;
左:50%;
margin-left: 400 px;
宽度:80 px;
}
#菜单ul李{
显示:块;
保证金:5 px 0;
字体大小:14 px;
粗细:大胆的;
颜色:# 333;
宽度:80 px;
高度:50 px;
行高:50 px;
text-align:中心;
文字修饰:没有;
}
#菜单ul李:{徘徊
颜色:# fff;
背景:# 0088 bb;
}
李#菜单ul .current {
颜色:# fff;
背景:# 0088 bb;
}
& lt;/style>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function () {
window.onscroll=function () {
var=document.documentElement。scrollTop | | document.body.scrollTop;
var菜单=. getelementbyid(“菜单”).getElementsByTagName (“a”);
var=. getelementbyid(“内容”).getElementsByClassName项目(“项目”);
var currentId=" ";
我(var=0; i< items.length;我+ +){
var _item=项目(我);
var _itemTop=_item.offsetTop;
如果(top> _itemTop - 200) {
currentId=_item.id;
其他}{
打破;
}
}
如果(currentId !=" ") {//给正确的菜单下的一元素类赋值
(var j=0; j< menus.length; j + +) {
var _menu=菜单[j];
var _href=https://www.yisu.com/zixun/_menu.href.split(" # ");//因为只通过href获取的链接为一长串链接,需要通过#分成数组
如果(_href [_href.length-1] !=currentId) {
_menu。className=" ";
其他}{
_menu。className=暗鼻啊?
}
}
}
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=安说ァ北?
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/item1”class=暗鼻啊痹? f男装& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/第二条“祝辞2 f女装& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/item3”在3 f美妆& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/item4”在4 f数码& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/item5”在5 f母婴& lt;/a> & lt;/li>
& lt;/ul>
& lt;/div>
& lt; div id=澳谌荨痹?
& lt; h2>地狗购物网& lt;/h2>
& lt; div id=癷tem1”class=拔锲贰北?
& lt; h3> 1 f男装& lt;/h3>
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/1F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/1F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/1F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/1F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/1F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/1F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/1F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/1F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/1F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt;/ul>
& lt;/div>
& lt; div id=暗诙酢眂lass=拔锲贰北?
& lt; h3> 2 f女装& lt;/h3>
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/2F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/2F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/2F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/2F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/2F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/2F.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/zixun/img/2F.jpg " alt="/祝辞& lt;/a> & lt;/li>
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
