JS 菜单栏一直悬浮在顶部代码

最新推荐文章于 2021-06-10 02:45:09 发布

转载最新推荐文章于 2021-06-10 02:45:09 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jkyweb/p/4264962.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现的菜单栏固定效果的方法。当页面滚动到特定位置时，菜单栏将固定在屏幕顶部；反之，则恢复其原始位置。文章提供了完整的jQuery代码示例。

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

只需要把下面代码放到js中：

$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".menu").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
if(scroH>=navH){
$(".menu").css({"position":"fixed","top":0,"left":0});
}else if(scroH<navH){
$(".menu").css({"position":"static","margin":"0 auto"});
}
console.log(scroH==navH);
})
})
上面的.menu是菜单栏的class

然后引入jquery.min.js即可