导航栏隐藏在带有偏移量的滚动中

如何解决导航栏隐藏在带有偏移量的滚动中

我正在使用此代码使我的粘性导航栏在向下滚动时消失并在向上滚动时重新出现。然而，这段代码非常精确，导致有时在没有实际滚动的情况下启动两个动画之一。

我想要实现的是，用户应该在 if 语句运行之前向下滚动 20px。如果他们再次向上滚动也一样......

const body = document.querySelector("#navbar");;
let lastScroll = 0;

window.addEventListener("scroll",() => {
    const currentScroll = window.pageYOffset;
    if (currentScroll <= 0) {
        body.classList.remove("scroll-up");
        return;
    }

    if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
        body.classList.remove("scroll-up");
        body.classList.add("scroll-down");
    } else if (
        currentScroll < lastScroll &&
        body.classList.contains("scroll-down")
    ) {
        body.classList.remove("scroll-down");
        body.classList.add("scroll-up");
    }
    lastScroll = currentScroll;
});

解决方法

据我所知，在我相对较旧的 Firefox 版本中，它运行良好。

我添加了 if (Math.abs(currentScroll - lastScroll) < 20) { return; }，这会增加 20 像素的延迟。

此外，那个 scroll-up 类似乎没有做任何事情。

更新：

如果您想要动画，可以替换 .scroll-down 的 CSS 并将 transition 添加到 #navbar：

#navbar.scroll-down {
  height: 0;
}

#navbar {
  /* … */
  transition: height .5s;
}

不仅 scroll-up 什么都不做，而且当您滚动到顶部时，以下代码甚至会中断（不显示导航栏）：

if (currentScroll <= 0) {
  body.classList.remove("scroll-up");
  return;
}

您可能想要删除它。

const body = document.querySelector("#navbar");
let lastScroll = 0;

window.addEventListener("scroll",() => {
  const currentScroll = window.pageYOffset;

  if (Math.abs(currentScroll - lastScroll) < 20) {
    return;
  }

  if (currentScroll > lastScroll) {
    body.classList.add("scroll-down");
  } else {
    body.classList.remove("scroll-down");
  }

  lastScroll = currentScroll;
});

body {
  margin: 0;
  min-height: 200vh;
}

#navbar.scroll-down {
  height: 0;
}

#navbar {
  height: 50px;
  background: red;
  position: sticky;
  top: 0;
  left: 0;
  transition: height .5s;
}

<body>
<div id="navbar">
  
</div>
</body>

你可以这样制作

HTML

<nav class="nav"></nav>

CSS

.nav{
  width: 100%;
  height: 40px;
  background: red;
  transition: 0.5s;
  position: sticky;
  top: 0;
}
.nav.hidden{
  transform: translateY(-50px);
}

window.addEventListener('scroll',()=> {
    const navbar = document.querySelector(".nav")
    navbar.classList.toggle("hidden",window.pageYOffset > 40)
})

我在导航类中添加了两个名为 nav 和 hidden 的属性，当类具有两个属性时，我在 Y 轴上将粘性导航栏向上移动 50 像素，并且在 javascript 代码中我使用切换，滚动时范围大于 40，我添加这个 nav hidden，如果不是我删除 hidden

您还可以在 JSFIDDLE

上查看它的工作原理