实现京东商城楼梯式导航定位菜单：滚动定位菜单项和点击定位菜单项！
涉及知识点：find()、parent()、offset(）、scroll()等jQ函数，请自觉复习各种函数！
rush:xhtml;">
css代码：
rush:css;">
#menu{
width:32px;height:360px;
position:fixed;
top:200px;left:0px;
display: none;
}
#menu ul li{
width:32px;height:32px;
list-style-type:none;
color:#8F8583;
text-align:center;
line-height: 32px;
border-bottom:1px dotted #ddd;
position:relative;
}
#menu ul li span{
display:block;width:32px;height:32px;
background:#C81623;
position:absolute;
top:0;left:0;
color:#fff;font-size:12px;
display: none;
}
#menu ul li:hover span{display:block; }
#menu ul li span.active{color:#C81623;background:#fff;display:block;}
#content{
width:1220px;
margin:0 auto;
}
#footer{width:1220px;height:600px;background:#FE7678;}
.container{margin:0 auto;}
jQuery代码：
if(sc.scrollTop()>=600){
$("#menu").show();
//获取滚动元素对应的索引!!!重难点
var index=Math.floor(sc.scrollTop()/600);
$("#menu").show();
//获取滚动元素对应的索引!!!重难点
var index=Math.floor(sc.scrollTop()/600);
$("#menu ul li span").eq(index-1).addClass("active").parent().siblings().find("span").removeClass("active");
}else{
$("#menu").hide();
}
});
});
滚动中常用到的jQ写法：
总结：相对来说，这是个蛮有趣的实践案例，但其中用到比较多的函数，结合了本案例比较特殊的html结构设计，需要理清滚动导航时候的条件判断。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
