滚动导航栏

Question

Stackoverflow的新功能。我正在尝试创建一个类似于该网站的https://www.stuff.co.nz/的滚动导航条，在该滚动条中，当您向下滚动时，缓慢向上滚动的导航栏最终会隐藏起来，而当您向上滚动时会逐渐向下滚动的滚动条。

以下是我尝试过的一些代码。它不完整，因为我不知道如何使其工作。谁能帮帮我吗？谢谢。

// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};
  var b = document.documentElement.scrollTop;


function scrollFunction() {
  var a = document.documentElement.scrollTop;
  var c = document.documentElement.scrollTop;

document.getElementById("demo").innerHTML = a;
document.getElementById("demo1").innerHTML = b;



  if (a>b) {
    document.getElementById("header").style.transform = "translateY(" + (-c) + "px)";
  } else {
    document.getElementById("header").style.transform = "translateY(" + (-c) + "px)";
  }
  b=a;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#header {
  background-color: #f1f1f1;
  padding: 50px 10px;
  color: black;
  text-align: center;
  font-size: 90px;
  font-weight: bold;
  position: fixed;
  top: 0;
  width: 100%;
  transition: 0.2s;
}

 <div id="header">Header</div>

  <div style="margin-top:200px;padding:15px 15px 2500px;font-size:30px">


    <p><b>This example demonstrates how to shrink a header when the user starts to scroll the page.</b></p>
    <p>Scroll down this frame to see the effect!</p>
    <p>Scroll to the top to remove the effect.</p>
    <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p id="demo"></p>
    <p id="demo1"></p>

  </div>