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

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

网页定位导航特效

                
                姜维
            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

滚动时无法定焦点问题

已采纳回答 / 夜莺z

<div id="menu"><ul><li><a href="#" class="current">1F 男装</a></li><li><a href="#">2F 女装</a></li><li><a href="#">3F 美妆</a></li><li><a href=...

1 回答 1475 浏览 4-5 编程练习

2017-04-20