css导航栏跟着滑动

CSS 可以让我们轻松地创建具有丰富视觉效果的导航栏。但是，如果我们希望导航栏能够跟着滑动，以便在页面上不断出现和消失，该怎么办呢？下面我们将介绍一种使用 CSS 和 JavaScript 实现这一功能的简单方法。

.nav {
    position: fixed;
     /* 将导航栏固定在页面上方 */top: 0;
    z-index: 999;
    width: 100%;
}
    

以上 CSS 代码用于创建一个固定在页面上方的导航栏。为了使导航栏能够在页面中滑动，我们需要 JavaScript 来检测滚动事件并相应地修改导航栏的样式。

script>
    const nav = document.querySelector('.nav');
     // 导航栏元素const navHeight = nav.offsetHeight;
     // 导航栏高度let lastScrollTop = 0;
     // 上一次滚动的位置window.addEventListener('scroll', () =>
 {
     // 监听滚动事件const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
     // 计算当前滚动位置if (scrollTop >
 lastScrollTop) {
     // 向下滚动nav.style.top = code>
-${
navHeight}
    px/code>
    ;
 // 导航栏向上滑动}
 else {
     // 向上滚动nav.style.top = 0;
 // 导航栏向下滑动}
    lastScrollTop = scrollTop;
 // 更新上一次滚动的位置}
    );
    /script>
    

以上 JavaScript 代码用于监听滚动事件并实现导航栏跟随滑动的效果。我们首先获取导航栏元素和高度，然后在滚动事件中计算当前滚动位置并与上一次滚动位置进行比较，从而确定导航栏需要移动的方向和距离。

最后，在 HTML 中我们只需要添加一个 class 名为 nav 的元素即可。当然，我们也可以为该元素添加额外的样式和内容以适应实际需求。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！