使用jQuery实现页面下滑时顶部导航栏固定跟随页面滚动

现在很多建站公司或工作室都是使用模板去建站，为了更符合客户的需求难免遇到一些小的改动。今天给大家分享一下如何使用jQuery实现页面下滑时，实现网站的头部区域或网站导航栏固定跟随页面滚动效果。如下图：

实现思路：

可以通过使用jQuery来监听页面的滚动事件，然后动态的添加或移除sticky类，改变导航栏的样式或者位置来实现。

代码示例：

HTML代码示例：

调试建议：可直接在要实现跟随滚动的区域，外部div中加入id="top-nav"

CSS代码示例：

#top-nav {  
    position: relative; /* 或者 static，默认就是 static */  
    /* 其他样式 */  
}  
  
#top-nav.sticky {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    z-index: 9999; /* 设置一个较高的z-index值，确保导航栏在最上层 */ 
    /* 其他样式 */  
}

调试建议：如果希望导航栏在页面滚动时始终保持在最上层，可以通过给导航栏设置一个较高的 z-index 值来实现。

jQuery代码示例：（确保页面中引入了jQuery库）

调试建议：当页面滚动超过100像素时，导航栏会变为固定位置（position: fixed），并停留在页面顶部。当页面滚动回顶部时，导航栏会恢复原来的位置（position: relative 或 position: static）。可以根据需要调整这个阈值（在这个例子中是100像素）。

总结

如果你的模板并没有引入jQuery库，想使用原生的JavaScript来实现同样的效果，那么也可以参考下这篇教程：

原生JavaScript实现页面下滑时顶部导航栏固定跟随页面滚动