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

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

涉及知识点：查找()、父项()、偏移量()、滚动()等日本季刊日本季刊函数，请自觉复习各种函数！

超文本标记语言代码：

！-导航菜单- div id='menu' ul li1Fspan服饰/span/Li 2 fspan美妆/span/li li3Fspan手机/span/li li4Fspan家电/span/li li5Fspan数码/span/li li6Fspan运动/span/Li 7 fspan居家/span/li li8Fspan母婴/span/Li Li食品/span/li li10Fspan图书/span/li li11Fspan服务/span/li /ul /div！-导航菜单- !-产品内容-div id=' content ' img src=' http : images/head。png ' alt=' style='边框：1 px纯红；div class=' louti ' id=' louti 1 ' img src=' http : images/f1。png ' alt=' '/div class=' louti ' id=' louti 2 ' img src=' http : images/F2。png ' alt=' '/div class=' louti ' id=' louti 3 ' img src=' http : images/F3。png ' alt=' '/div class=' louti ' id=' louti 3 '-产品内容- !-底部-div id=' footer ' class=' container '/div CSS代码：

#菜单{ width:32px高度：360 px位置：固定；top :200 pxleft :0 pxdisplay :无；} #菜单ul Li { width :32 pxh8 :32 px列表样式-:型无；color: # 8F8583文本对齐：居中；线高： 32px边框-底部：1px虚线# ddd位置：相对；} #菜单ul li span {显示：block宽度：32 px高度：32px背景# C81623位置：绝对；top :0 left :0 color : # ffffont-size :12 px；显示器：无；} #菜单ul Li :悬停跨度{显示：块} #菜单ul Li span。活动{ color : # c 81623背景# fff显示：块；} #内容{ width :1220 pxmargin 33600 auto } #页脚{宽度：1220像素高度：600 px背景技术# FE7678}。集装箱{ margin:0 auto}jQuery代码：

$(function(){ var _ index=0；$(' #菜单ul li ').单击(function(){ $(this)).查找(' span ').addClass('active ').父项()。兄弟姐妹()。查找(' span ').移除CLaSS(' active ')；_index=$(this).索引()1;//通过拼接字符串获取元素，再取得相对于文档的高度var _top=$('#louti' _index).偏移量()。顶部；//scrollTop滚动到对应高度$("正文，html ).动画({scrollTop:_top}，500)；});var nav=$(' # menu ')；//得到导航对象var win=$(窗口);//得到窗口对象var sc=$(文档);//得到文件文档对象。赢了。滚动(函数(){ if(sc。滚动顶部()=600){ $(' # menu ').show()；//获取滚动元素对应的索引！重难点var指数=数学。楼层(sc。滚动顶部()/600)；$('菜单ul li span ').eq(指数-1)。addClass('active ').父项()。兄弟姐妹()。查找(' span ').移除CLaSS(' active ')；}else{ $('#menu ').hide()；} });});滚动中常用到的日本季刊日本季刊写法：

$("正文，html ).动画({scrollTop:_top}，500)；

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。