jQuery京东分类导航菜单

本文详细介绍了如何使用jQuery实现动态网页菜单的滑动效果,包括计算元素位置、滚动条位置与窗口顶部距离,以及根据这些信息调整下拉菜单的显示位置,以避免常见Bug并确保用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

		$('.all-sort-list > .item').hover(function(){
			var eq = $('.all-sort-list > .item').index(this),		//获取当前滑过是第几个元素
				h = $('.all-sort-list').offset().top,			//获取父菜单距离窗口多少像素 120px
				s = $(window).scrollTop(),				//获取浏览器滚动了多少高度
				i = $(this).offset().top,				//当前鼠标滑过元素距离窗口多少像素
				item = $(this).children('.item-list').height(),		//下拉菜单子类内容容器的高度
				sort = $('.all-sort-list').height();			//父类分类列表容器的高度
			
			if ( item < sort ){						//如果子类的高度小于父类的高度
				if ( eq == 0 ){
					$(this).children('.item-list').css('top', (i-h));
				} else {
					$(this).children('.item-list').css('top', (i-h)+1);					
				}
			} else {
				if ( s > h ) {		//判断子类的显示位置,如果滚动的高度大于所有分类列表容器的高度
					if ( i-s > 0 ){	//则 继续判断当前滑过容器的位置 是否有一半超出窗口一半在窗口内显示的Bug,
						$(this).children('.item-list').css('top', s-h);
					} else {
						$(this).children('.item-list').css('top', (s-h)-(-(i-s))+2 );
					}
				} else {
					$(this).children('.item-list').css('top', 0 );
				}
			}	

			$(this).addClass('hover');
			$(this).children('.item-list').css('display','block');
		},function(){
			$(this).removeClass('hover');
			$(this).children('.item-list').css('display','none');
		});

		$('.item > .item-list > .close').click(function(){
			$(this).parent().parent().removeClass('hover');
			$(this).parent().hide();
		});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值