#javascript #svelte
Вопрос:
Я хочу, чтобы навигация скрывала прокрутку вниз на 60 пикселей и отображалась при прокрутке вверх на 60 пикселей, независимо от того, в какой части страницы.
Я сделал это, но это неполно, чего мне не хватает?
<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>
Ответ №1:
Ваш код, кажется, идеально скрывает навигационную панель после прокрутки указанной суммы, вот повторение вашего кода в действии. может быть, в основной части вашего контента нет свитка ?
вот еще один пример реализации, в котором более подробно описывается, как использовать положение прокрутки
<script>
import {onMount, onDestroy} from 'svelte'
const scrollNavBar = 60
let show = false
onMount(() => {
window.onscroll = () => {
if (window.scrollY > scrollNavBar) {
show = true
} else {
show = false
}
}
})
onDestroy(() => {
window.onscroll = () => {}
})
</script>
<style>
.scrolled {
transform: translate(0,calc(-100% - 1rem))
}
nav {
width: 100%;
position: fixed;
box-shadow: 0 -0.4rem 0.9rem 0.2rem rgb(0 0 0 / 50%);
padding: 10px;
transition: 0.5s ease
}
:global(body) {
margin: 0;
padding: 0;
height: 200vh;
}
</style>
<nav class:scrolled={show}>
elemnt
</nav>