Javascript 如何实现这种不透明度的滚动行为？

我正在尝试制作一个类似于的粘性标题

它会根据您的滚动程度将标题的不透明度从0逐渐更改为1。目前，您需要向上滚动约70像素，以达到完全不透明度。然后向下滚动70px，使其返回不透明度0

我需要什么样的逻辑根据滚动逐渐增加/减少不透明度

提前感谢。

这里有一个非常难看的概念证明（重要的部分是javascript）：

var-prevScrollY=0；
var不透明度=1；
window.addEventListener（“滚动”，函数（e）{
如果（滚动>上一次滚动）{
不透明度-=（滚动-前滚动）/70；
}否则{
不透明度+=（前滚动-滚动）/70；
}
不透明度=数学最大值（数学最小值（不透明度，1），0）；
header.style.opacity=不透明度；
prevScrollY=滚动；
});
#标题{
位置：固定；
背景色：红色；
宽度：100%；
}
身体{
保证金：0；
}


这是标题




这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物


这只是填充物
如何扩展此代码段，以便即使我不在页面顶部，也能始终看到滚动条上的标题？@skilly因为我已编辑了我的文章以包含此功能。谢谢，您的回答帮助很大。