Javascript 滚动导航栏

Stackoverflow的新特性。我正在尝试创建一个类似于本网站的滚动导航栏，当你向下滚动时，导航栏慢慢向上转换最终变成隐藏，当你向上滚动时，它慢慢向下转换

下面是我尝试过的一些代码。它不完整，因为我不知道如何使它工作。有人能帮我吗？多谢各位

//当用户从文档顶部向下滚动50px时，调整标题的字体大小
window.onscroll=function（）{scrollFunction（）}；
var b=document.documentElement.scrollTop；
函数滚动函数（）{
var a=document.documentElement.scrollTop；
var c=document.documentElement.scrollTop；
document.getElementById（“demo”）.innerHTML=a；
document.getElementById（“demo1”）.innerHTML=b；
如果（a>b）{
document.getElementById（“header”）.style.transform=“translateY”（+（-c）+“px）”；
}否则{
document.getElementById（“header”）.style.transform=“translateY”（+（-c）+“px）”；
}
b=a；
}

正文{
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
#标题{
背景色：#f1f1；
填充：50px 10px；
颜色：黑色；
文本对齐：居中；
字体大小：90px；
字体大小：粗体；
位置：固定；
排名：0；
宽度：100%；
过渡：0.2s；
}

标题
此示例演示如何在用户开始滚动页面时收缩页眉

向下滚动此帧以查看效果

滚动至顶部以删除效果

Lorem ipsum door dummy text sit amet，concetetur adipiscing elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
如果你是一个不受欢迎的人，那么你就可以在一个不受欢迎的地方。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡