实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项!
涉及知识点:find()、parent()、offset()、scroll()等jQ函数,请自觉复习各种函数!
html代码:
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代码:
$(function(){ var _index=0; $("#menu ul li").click(function(){ $(this).find("span").addClass("active").parent().siblings().find("span").removeClass("active"); _index=$(this).index()+1; //通过拼接字符串获取元素,再取得相对于文档的高度 var _top=$("#louti"+_index).offset().top; //scrollTop滚动到对应高度 $("body,html").animate({scrollTop:_top},500); }); var nav=$("#menu"); //得到导航对象 var win=$(window); //得到窗口对象 var sc=$(document);//得到document文档对象。 win.scroll(function(){ if(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写法:
$("body,html").animate({scrollTop:_top},500);
总结:相对来说,这是个蛮有趣的实践案例,但其中用到比较多的函数,结合了本案例比较特殊的html结构设计,需要理清滚动导航时候的条件判断。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。