页面滚动的时候自动切换导航栏

最新推荐文章于 2024-04-24 09:22:16 发布

HeartAndThink

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量5.8k

点赞数 2

文章标签：导航栏滚动 javascript

本文链接：https://blog.csdn.net/heartAndthink/article/details/75315267

版权

解决方法:

页面主体设置相同的结构如:

<body>

</body>

当我们页面下上滑动的时候利用当前div 的offset().top的值与页面滚动的距离作比较,进而获取当前页面主体显示的是哪个div(class为items的div)，进而去对应导航栏上的对应选项，达到切换效果)

代码:

    $(window).scroll(function(){
		var top=document.documentElement.scrollTop || document.body.scrollTop;
		var curId = "";       // 当前页面 div 快 的id
		var  items = $('.items');
		items.each(function(i,e){
			var m = $(this);
			var itemsTop = m.offset().top;
			if(top>itemsTop-250){
				 curId = "#" + m.attr("id");
			}else{
				return false;
			}
			
		});	
		
		// 这里我们获取到当前主体显示的div,可以知道当前div的id,根据当前div的信息去对应导航栏的选项，可以进行导航栏切换
		// 或者进行其他操作
   });

优惠劵

HeartAndThink

关注关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
页面滚动的时候自动切换导航栏

解决方法:页面主体设置相同的结构如:当我们页面下上滑动的时候利用当前div 的offset().top的值与页面滚动的距离作比较,进而获取当前页面主体显示的是哪个div(class为time的div)，进而去对应导航栏上的对应选项，达到切换效果)代码: $(window).scroll(function(){ var top=document.d
复制链接

扫一扫