我希望导航隐藏向下滚动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>
2条答案
按热度按时间ktecyv1j1#
你的代码似乎完美地隐藏了导航栏后,你滚动指定的数额,这里是一个REPL的代码在行动。也许你的内容的主体没有滚动?
这里是进一步详述如何使用滚动位置的另一实现REPL
pftdvrlh2#
在你的REPL中,看起来导航在向上滚动时不会重新出现。它只会出现在页面的顶部。
例如,我还尝试在用户向上滚动30px时显示导航,我认为这也是OP所要求的。
我发现一个REPL已经成功地用jQuery实现了这个功能,但是我现在还在努力让它在Svelte中工作,有什么线索吗?
如果我成功了,我会回来的。