上篇文章讲过了如何使用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代码示例：

<button class="go-copy btn laok-92o9zmb" data-clipboard-action="copy" data-clipboard-target="#pre14" style="box-sizing: inherit; border-radius: 0.25rem; font-family: Lato, sans-serif; font-size: 0.8rem; line-height: 1.5; display: block; color: rgb(255, 255, 255); background: rgb(51, 51, 51); border-color: rgb(35, 35, 35); padding: 0.375rem 0.75rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; position: absolute; top: 0px; right: 0px; max-width: 100%;">复制代码</button><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实现页面下滑时顶部导航栏固定跟随页面滚动