jquery简单制作悬浮导航滚动到哪儿定位到哪儿

最新推荐文章于 2025-06-02 11:21:14 发布

原创最新推荐文章于 2025-06-02 11:21:14 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #导航 #滚动 #定位

代码片段专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的页面导航与滚动效果的方法。通过监听窗口滚动事件，实现导航栏的悬浮效果及平滑滚动到指定位置的功能。同时，文章提供了完整的代码示例，便于读者理解和应用。

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

demo

$(document).ready(function() {
	scr_win();
	scr_li();//初始化滚动方法
	$(".dtnav li").click(function() {
		$(window).unbind();
		$(this).addClass('active');
		$(this).siblings('li').removeClass('active');
		scr_win();
		$('body,html').animate({
				scrollTop: $("#" + $(this).attr('id').split('_')[1])[0].offsetTop - 50
			}, 500, function() {scr_li();});
	});

});
function scr_win(){//全局滚动时 导航悬浮
	$(window).scroll(function() {
		ele = $(".dtnav").parent("div")[0];
		if (ele.offsetTop - $(window).scrollTop() <= 0) {
			$(".dtnav").addClass('piaofu');
			$(".dtnav").parent("div").height($(".dtnav").height()-1);
		}else{
			$(".dtnav").removeClass('piaofu');

		};
	});
}
function scr_li(){//导航目录所要滚动到的位置
	$(window).scroll(function() {
		$(".dth2").each(function(){
			asd = this.offsetTop - $(window).scrollTop();
			if (asd <= 50){
				$("#li_"+$(this).attr('id')).addClass('active');
				$("#li_"+$(this).attr('id')).siblings('li').removeClass('active');
			}
		});
	});
}