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

上篇文章讲过了如何使用jQuery实现页面下滑时顶部导航栏固定跟随页面滚动，有的朋友找到我说，有的模板并没有引入jQuery库，如果不引入怎么实现呢？

实现导航栏跟随页面滚动的效果并不一定需要jQuery。现代的前端开发越来越倾向于使用原生的JavaScript，因为它更轻量、更快速，并且不依赖于任何外部库。今天给大家分享下，使用原生JavaScript实现导航栏跟随页面滚动效果的示例。

HTML代码示例：

调试建议：

可直接在要实现跟随滚动的区域，外部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代码示例：

调试建议：

示例中，使用了 window.onscroll 来监听滚动事件，window.pageYOffset 来获取页面滚动的距离。当滚动距离大于或等于100像素时，我们给导航栏添加 .sticky 类，使其固定在顶部。当滚动距离小于100像素时，我们移除这个类，让导航栏恢复原位。

注意事项：

这里使用了 classList.add() 和 classList.remove() 方法来添加和移除类，这是现代浏览器支持的方法。如果你需要支持更老的浏览器，你可能需要使用其他方法，比如直接操作 className 属性。

总结

使用原生JavaScript的好处是减少了对外部库的依赖，提高了性能，并且让你更深入地理解JavaScript本身的工作原理。如果你的前端已经引入了jQuery库，那么也可以参考以下这篇教程：

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