使用JavaScript代码实现页面下滑时顶部导航栏固定跟随页面滚动
无需魔法，免费体验ChatGPT-4 / MJ绘图 等AI大模型！AI问答、写文案、做表格、绘图、写脚本、写代码...
上篇文章讲过了如何使用jQuery实现页面下滑时顶部导航栏固定跟随页面滚动，有的朋友找到我说，有的模板并没有引入jQuery库，如果不引入怎么实现呢？
实现导航栏跟随页面滚动的效果并不一定需要jQuery。现代的前端开发越来越倾向于使用原生的JavaScript，因为它更轻量、更快速，并且不依赖于任何外部库。今天给大家分享下，使用原生JavaScript实现导航栏跟随页面滚动效果的示例。
HTML代码示例：
<nav id="top-nav"> <!-- 导航栏内容 --> </nav> <main> <!-- 页面主要内容 --> </main>
调试建议：
可直接在要实现跟随滚动的区域，外部div中加入id="top-nav"
CSS代码示例：
#top-nav {
position: relative; /* 初始位置 */
/* 其他样式 */
transition: top 0.3s ease; /* 添加过渡效果使导航栏的固定更加平滑 */
}
#top-nav.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999; /* 确保导航栏在最上层 */
/* 其他样式，比如背景色等 */
}调试建议：
如果希望导航栏在页面滚动时始终保持在最上层，可以通过给导航栏设置一个较高的 z-index 值来实现。
JavaScript代码示例：
<script>
window.onscroll = function() {
var nav = document.getElementById('top-nav');
if (window.pageYOffset >= 100) { // 当滚动条的位置处于距顶部100像素以下时
nav.classList.add('sticky');
} else {
nav.classList.remove('sticky');
}
};
</script>调试建议：
示例中，使用了 window.onscroll 来监听滚动事件，window.pageYOffset 来获取页面滚动的距离。当滚动距离大于或等于100像素时，我们给导航栏添加 .sticky 类，使其固定在顶部。当滚动距离小于100像素时，我们移除这个类，让导航栏恢复原位。
注意事项：
这里使用了 classList.add() 和 classList.remove() 方法来添加和移除类，这是现代浏览器支持的方法。如果你需要支持更老的浏览器，你可能需要使用其他方法，比如直接操作 className 属性。
总结
使用原生JavaScript的好处是减少了对外部库的依赖，提高了性能，并且让你更深入地理解JavaScript本身的工作原理。如果你的前端已经引入了jQuery库，那么也可以参考以下这篇教程：
使用jQuery实现页面下滑时顶部导航栏固定跟随页面滚动
天客隆模板网
