jq滚动scroll事件，元素悬浮顶部固定位置

最新推荐文章于 2023-09-26 10:28:29 发布

原创最新推荐文章于 2023-09-26 10:28:29 发布 · 558 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文介绍了一种使用jQuery实现元素在滚动到特定位置时固定于页面顶部的方法。通过监听滚动事件并比较元素距离顶部的距离与当前滚动高度，动态调整元素的CSS属性，实现元素的固定或释放。

$(document).ready(function(){
	//获取元素距浏览器顶部的高度
	var gerTop = $('.ger_tbmu').offset().top;
	//监控滚动栏scroll
	$(document).scroll(function(){
		//获取当前滚动栏scroll的高度
		var scrTop = $(window).scrollTop();
		//如果元素距顶部的高度 等于 当前滚动栏的高度，开始悬浮；否则清空悬浮
		if(scrTop >= gerTop ){
			$('.ger_tbmu').css({'position':'fixed','top':'0','z-index':'9999'});
		}else{
			$('.ger_tbmu').css({'position':'','top':'','z-index':''});
		}
	})
})