当用户不滚动页面时如何显示 <div>

Question

这个简单的代码，当用户向下滚动页面并显示 div 时隐藏 div "Navbar"， 当用户向上滚动时。

如何更改此代码 - 只有当用户滚动页面时 div 才会不可见？ 而当用户停止滚动时，div 会出现在屏幕上吗？

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
} 
</script>

请帮忙！ 感谢您的宝贵时间

Answer 1

您可以使用 setTimeout 来实现。它的工作原理是这样的：当用户滚动时，导航栏被隐藏并开始超时，如果用户在接下来的 100 毫秒内没有滚动，这将使导航栏可见。

// We need this to manage setInterval
var isScrolling;
navbar = document.getElementById("navbar");

window.addEventListener('scroll', ()=>{
   navbar.style.top = "-" + navbar.style.height;
   window.clearTimeout( isScrolling );

   isScrolling = setTimeout(function() {
       navbar.style.top = "0";
   }, 100);

}, false);

试一试。