javascript - 即使向上滚动 1 像素，导航栏也会变得粘滞 - 我希望它仅在滚动超过 10 像素时才出现

Question

我正在开发一个导航栏，它在移动设备上始终粘着，向下滚动时消失，但在桌面上向上滚动时再次出现。

现在它工作得很好，但我有一个问题。在桌面上，立即向上滚动时它会变得粘滞。即使我只滚动一点点，这也会很烦人。

我希望它仅在滚动超过 10 像素时才出现。所以我需要添加一些阈值。我想这可以用 JS 完成，但我是初学者。

这是我现在拥有的东西:https://jsfiddle.net/zsoltszilvai/zfqd901m/4/

如果有任何帮助，我将不胜感激:)

var sticky = header.offsetTop;

var prevScrollpos = window.pageYOffset;

function myFunction(x) {
  if (x.matches) {

    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
    }

  } else {
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbar").style.top = "0";
        if (window.pageYOffset > sticky) {
          header.classList.add("sticky");
        }
      } else {
        document.getElementById("navbar").style.top = "-58px";
        if (window.pageYOffset < sticky) {
          header.classList.remove("sticky");
        }
      }
      prevScrollpos = currentScrollPos;
    }
  }
}

Answer 1

您需要将 prevScrollpos > currentScrollPos 更改为 prevScrollpos - currentScrollPos > 10，唯一棘手的部分是如果差异小于阈值，则不更新 prevScrollPos。

var prevScrollpos = window.pageYOffset;
var SCROLL_UP_THRESHOLD = 200

function myFunction(x) {
  window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    console.log(prevScrollpos, currentScrollPos)
    if (prevScrollpos > currentScrollPos) {
      if (prevScrollpos - currentScrollPos < SCROLL_UP_THRESHOLD) 
        return console.log("not opening")
      document.getElementById("navbar").style.top = "0";
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      }
      prevScrollpos = currentScrollPos;
    } else {
      document.getElementById("navbar").style.top = "-58px";
      if (window.pageYOffset < sticky) {
        header.classList.remove("sticky");
      }
      prevScrollpos = currentScrollPos;
    }
  }
}