WEB前端:使用JQ便捷的设置导航栏在使用鼠标滚动后自动固定到页面顶端

在做web前端的页面时,通常为了好看,需要将导航固定在页面顶端,但是由于某些时候,导航并不能一直固定,因为某些情况下,需要在导航栏上方添加某些内容,使得页面变得更加丰满一些。所以需要使用某些功能使得只有当鼠标滚动的距离大于导航的高度时,才将其固定首先,获取指定导航距离页面顶部的距离然后使用jq添加当鼠标滚动函数判断当前滚动的距离与导航距离顶部的距离大于,则添加class,小于则删除class,固定形式及样式,就自己使用css控制吧$(function(){ var t =

在做web前端的页面时,通常为了好看,需要将导航固定在页面顶端,但是由于某些时候,导航并不能一直固定,因为某些情况下,需要在导航栏上方添加某些内容,使得页面变得更加丰满一些。


所以需要使用某些功能使得只有当鼠标滚动的距离大于导航的高度时,才将其固定


首先,获取指定导航距离页面顶部的距离

然后使用jq添加当鼠标滚动函数

判断当前滚动的距离与导航距离顶部的距离

大于,则添加class,小于则删除class,

固定形式及样式,就自己使用css控制吧

image.png

$(function(){
	var t = $("nav").offset().top;
	$(window).scroll(function(){
		var wt = $(window).scrollTop();
		if(wt>t){
			$("nav").addClass('fix');
		}else{
			$("nav").removeClass('fix');
		}
	})
})


评论