当用户向上滚动时，显示导航栏——但不是立即显示。如何？答案

【问题标题】：When the user scrolls up, show the navbar — but not immediately. How to?当用户向上滚动时，显示导航栏——但不是立即显示。如何？
【发布时间】：2019-04-25 13:54:13
【问题描述】：

我想改进现有代码，允许我在用户向上滚动后显示导航栏，但延迟 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;
}

现在，导航栏在向上滚动时会立即出现。

【问题讨论】：

我的问题已经在这里得到解答：stackoverflow.com/questions/46078005/…

标签： javascript

【解决方案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";
 }
}

【讨论】：