Javascript 当向上滚动1px时，导航栏会变粘-我希望它仅在滚动超过10px时才会出现

我正在使用一个导航条，它在手机上总是很粘，向下滚动时会消失，但在桌面上向上滚动时会再次出现

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

我希望它只在滚动超过10px时出现。所以我需要增加一些阈值。我想可以用JS完成，但我是个初学者

这是我现在拥有的一把小提琴：

我非常感谢您的帮助：

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;
    }
  }
}

您需要将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;
    }
  }
}

---

你好下面是当前行为的gif：只是一个更新：您的解决方案实际上非常有效，我只需确保将所有其他语句都放在正确的位置：非常感谢，我感谢您的帮助：