当用户向上滚动时，显示导航栏-但不要立即显示。如何？

Question

我想改进现有代码，使用户向上滚动后显示导航栏，但要延迟XXX Px向上滚动。如何在我的函数中集成此Pixel-Amount-Delay？

我希望有人可以帮助我实现这一目标。

/* 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("navi").style.bottom = "0";

    } else {
        document.getElementById("navi").style.bottom = "-30vh";

    }
    prevScrollpos = currentScrollPos;
}

现在，导航栏在向上滚动时立即显示。

Answer 1

尝试一下，只是根据需要的像素数设置一个条件。

// When the user scrolls down 30px from the top of the document, slide down the navbar
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
    document.getElementById("navbar").style.top = "0";
  } else {
   document.getElementById("navbar").style.top = "-50px";
 }
}