Javascript 当用户滚动时，粘性导航栏重新出现

我试图创建一个功能，如果用户向下滚动，sitcky导航栏标题将消失。如果用户向上滚动，它将重新出现

我几乎明白了，唯一的问题是当我滚动时，标题消失了，只有当我停止滚动时才重新出现。事实上，它在重新出现之前会闪烁

这就是我努力实现的目标：

HTML:

...

Javascript:

<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("site-header").style.top = "0";
  } else {
      document.getElementById("site-header").style.top = "-100%";
  }
  prevScrollpos = currentScrollPos;
}
</script>

/*当用户向下滚动时，隐藏导航栏。当用户向上滚动时，显示导航栏*/
var prevScrollpos=window.pageYOffset；
window.onscroll=函数（）{
var currentScrollPos=window.pageYOffset；
如果（prevScrollpos>currentScrollPos）{
document.getElementById（“站点标题”）.style.top=“0”；
}否则{
document.getElementById（“站点标题”）.style.top=“-100%”；
}
prevScrollpos=当前ScrollPos；
}

滚动事件是一个机关枪。。。。它在一次鼠标滚轮旋转中发射10多次以上

尝试稍微缓冲一下这些事件。。。结合使用

clearTimeout

/

setTimeout

：

/*当用户向下滚动时，隐藏导航栏。当用户向上滚动时，显示导航栏*/
让滚动超时
var prevScrollpos=window.pageYOffset；
window.onscroll=函数（）{
var currentScrollPos=window.pageYOffset；
如果（prevScrollpos>currentScrollPos）{
document.getElementById（“站点标题”）.style.top=“0”；
}否则{
document.getElementById（“站点标题”）.style.top=“-100%”；
}
//这里的事件缓冲
clearTimeout（滚动超时）
scrollTimeout=setTimeout（函数（）{
prevScrollpos=当前ScrollPos；
}，500）//此延迟可能需要调整。。。
}

#站点标题{
背景：黄色；
}
#页面{
高度：50000像素；
背景：蓝色；
}

我是队长。。。我知道我很丑，但那只是一个演示。

查看此处的可运行堆栈代码段，您给出的代码没有显示问题。请提供更多代码。您正在更新

prevScrollpos=currentScrollPos在每个滚动事件中，您可能需要clearTimeout/setTimeout来更新该事件。。。将事件缓冲一点。卷轴是机关枪@sergeykuznetsov我看不到任何其他影响它的代码，除了我发布的内容：）谢谢你。我确实尝试过这段代码，向上滚动效果很好，但向下滚动才是问题所在。问题不是向下滚动，而是当我向下滚动后停止时导航条重新出现（或者说当它出现时闪烁）。我会很快尝试做你在代码中提到的延迟调整。该死的，时间调整不起作用，我尝试了变短变长，100，5000和50000我做了一个片段。。。似乎在这里工作。您有两个类：
页眉页脚组粘性元素原始元素是粘性的
。。这是引导还是其他什么？试着一个接一个地删除这些类。它们可以用来触发其他脚本。
<script>
/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("site-header").style.top = "0";
  } else {
      document.getElementById("site-header").style.top = "-100%";
  }
  prevScrollpos = currentScrollPos;
}
</script>