Hide menu (navbar) when scrolling, by different amount of pixels in different media queries

My navbar hides when scrolling down by 96px because that’s its height on large screens.
Scrolling up causes the navbar to return.

However, the navbar height will change at different breakpoints and I will have to modify the script.

The problem is that I don’t know javascript, jquery or any other programming language at all. I copied the script and only changed the number of pixels in it. Could someone write me a ready-made script to change the value?

I’m creating a website for the company I work for and I really need it. I would be very grateful!

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

I looked at this page:

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

But I won’t get anything out of it because, as I wrote earlier, I don’t know anything about programming