滚动时隐藏菜单（导航栏），在不同媒体查询中按不同数量的像素

Question

我的导航栏在向下滚动 96 像素时会隐藏，因为这是它在大屏幕上的高度。 向上滚动会导致导航栏返回。

但是，导航栏高度会在不同的断点处发生变化，我将不得不修改脚本。

问题是我根本不懂 javascript、jquery 或任何其他编程语言。我复制了脚本，只更改了其中的像素数。有人可以给我写一个现成的脚本来更改该值吗？

我正在为我工作的公司创建一个网站，我确实需要它。我将非常感激！

<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 = "-96px";
  }
  prevScrollpos = currentScrollPos;
}
</script>

我看了这个页面：

https://www.w3schools.com/howto/howto_js_media_queries.asp

但是我不会从中得到任何东西，因为正如我之前写的，我对编程一无所知

Answer 1

我想这样就可以了:

<script>
var prevScrollpos = window.pageYOffset;
const navbar = document.getElementById("navbar");

window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = `-${navbar.offsetHeight}px`;
  }

  prevScrollpos = currentScrollPos;
}
</script>