Javascript 苗条-在滚动上隐藏和显示导航

我希望导航隐藏向下滚动60px，并在向上滚动60px时显示，无论在页面的哪个部分

我这样做了，但它不完整，我缺少什么

<script>
 let y = 0;
</script>

<svelte:window bind:scrollY="{y}" />

<nav class:hideNav={y > 60}>
 <ul>
  <li>link</li>
 </ul>
</nav>

<style>
nav {
  position: fixed;
  top: 0;
}

.hideNav {
  top: -70px;
}
</style>

设y=0；
60}>

链接

导航{
位置：固定；
排名：0；
}
希德纳夫先生{
顶部：-70px；
}

滚动指定数量后，您的代码似乎完美地隐藏了导航栏，下面是您的代码的一部分。也许你的内容主体没有卷轴

下面是另一个实现，它进一步阐述了如何使用滚动位置

从“svelte”导入{onMount，onDestroy}
常量滚动导航条=60
让show=false
onMount（（）=>{
window.onscroll=（）=>{
如果（window.scrollY>scrollNavBar）{
show=true
}否则{
show=false
}
}
})
onDestroy（（）=>{
window.onscroll=（）=>{}
})
.滚动{
转换：转换（0，计算（-100%-1rem））
}
导航{
宽度：100%；
位置：固定；
盒影：0-0.4rem 0.9rem 0.2rem rgb（0/50%）；
填充：10px；
过渡：0.5s轻松
}
：全局（正文）{
保证金：0；
填充：0；
高度：200vh；
}
元素