导航条悬浮特效

最新推荐文章于 2023-11-10 14:44:35 发布

转载最新推荐文章于 2023-11-10 14:44:35 发布 · 655 阅读

本文详细介绍了如何使用jQuery实现页面滚动时导航栏的固定效果，通过监控滚动条位置，判断导航栏是否达到预设高度，从而实现导航栏的固定与取消。

<script>
	    $(function () {
			$(document).ready(function(){
			//首先获取导航栏距离浏览器顶部的高度
			var top = $('.nav').offset().top;
			//开始监控滚动栏scroll
			$(document).scroll(function(){
			//获取当前滚动栏scroll的高度并赋值
			var scrTop = $(window).scrollTop();
			//开始判断如果导航栏距离顶部的高度等于当前滚动栏的高度则开启悬浮
			if(scrTop >= top){
			$('.nav').css({'position':'fixed','top':'0','width':'100%'});
			}else{//否则清空悬浮
			$('.nav').css({'position':'','top':''});
			}
			})
			})	
		});
 </script>