jQuery仿京东商城楼梯式导航定位菜单

前端之家收集整理的这篇文章主要介绍了jQuery仿京东商城楼梯式导航定位菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项!

涉及知识点:find()、parent()、offset()、scroll()@H_404_8@等jQ函数,请自觉复习各种函数

HTML代码

css代码

jQuery代码

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写法:

总结:相对来说,这是个蛮有趣的实践案例,但其中用到比较多的函数,结合了本案例比较特殊的html结构设计,需要理清滚动导航时候的条件判断

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/47103.html

猜你在找的jQuery相关文章