网页定位导航特效_技术问答

首页免费课网页定位导航特效问答

网页定位导航特效

                
                姜维
            Web前端工程师

                    查看讲师更多课程 
                    姜维讲师的其他课程
                
jQuery插件——Validation Plugin
中级·65871
免费课程
                                
jQM Web App –列车时刻表
中级·38491
免费课程
                                
基于bootstrap的网页开发
中级·187669
免费课程
                                
WEB调试工具---Firebug
初级·77662
免费课程
                                
用JS实现放大镜特效
初级·30102
免费课程
                                
                难度初级
            
                时长 1小时 1分
            
                学习人数
            
综合评分9.77
                            332人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.7
                                简洁易懂
                            
                                9.7
                                逻辑清晰

全部评论问答未解决精华

柔顺济

window.onload=function(){
window.onscroll=function(){
var top=document.documentElement.scrollTop||document.body.scrollTop;
var menus=document.getElementById("menu").getElementsByTagName("a");
var items=getByClassName(document.getElementById("content"),"item");

1 6-4 编程练习

2017-04-20

柔顺济

var currentId="";
for(var i=0; i<items.length; i++){
var _item=items[i];
var _itemTop=_item.offsetTop;
if(top>_itemTop-300){
currentId=_item.id;
}else{
break;
}
}

0 6-4 编程练习

2017-04-20

柔顺济

if(currentId){
for(var j=0; j<menus.length; j++){
var _menu=menus[j];
var _href=_menu.href.split("#");
if(_href[_href.length-1]!=currentId){
removeClass(_menu,"current");
}else{
addClass(_menu,"current");
}
}
}
}
}

0 6-4 编程练习

2017-04-20

柔顺济

0 6-4 编程练习

2017-04-20

柔顺济

#menu {
position: fixed;
top: 100px;
left: 50%;
margin-left: 400px;
width: 50px;
}

0 4-5 编程练习

2017-04-20

柔顺济

0 4-5 编程练习

2017-04-20

柔顺济

var currentId = "";
items.each(function(){
var m = $(this);
if(top > m.offset().top - 300){
currentId = "#" + m.attr("id");
}else{
return false;
}
});

0 4-5 编程练习

2017-04-20

柔顺济

var currentLink = menu.find(".current");
if(currentId && currentLink.attr("href") != currentId){
currentLink.removeClass("current");
menu.find("[href='" + currentId + "']").addClass("current");
}
});
});
</script>

0 4-5 编程练习

2017-04-20

柔顺济

0 4-5 编程练习

2017-04-20

Rachelya

老师讲的真棒,感谢!

0 4-2 使用jQuery实现网页定位导航（中）

2017-04-19

shan330

建议把代码复制到其他位置测试。。说真的，在这里看滚动改变className的效果看不到。

1 6-4 编程练习

2017-04-14

_夕晨踏雪

二楼可以用chrom浏览器上的开发者工具调试一下，函数的闭合肯定也是不能少了（）{ }的。

0 4-5 编程练习

2017-04-08

_夕晨踏雪

地狗.....墙都不服就服你。

1 1-1 特效介绍

2017-04-06

flyingtoparis

currentId所记录的就是图片的位置与导航条之间的关系。可以用index。更加方便点。不需要用href过多的处理了。

0 7-1 结语

2017-04-05

大蟹

要崩溃了，就因为一个单词“currentId”写错，折腾了好久才找出来错误

0 4-5 编程练习

2017-04-04

首页上一页 6 7 8 9 10 11 12 下一页尾页

开始学习

课程须知: 学习本课程之前，您需要具备HTML、CSS、JavaScript、jQuery几个方面的基础知识。

老师告诉你能学到什么？: 如何使用jQuery、JavaScript两种方式实现网页定位导航，提升HTML、CSS、JavaScript、jQuery的综合应用能力。

微信扫码，参与3人拼团

热搜

最近搜索清空

网页定位导航特效