Блог

Я хочу, чтобы навигация скрывала прокрутку вниз на 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>

 

Ваш код, кажется, идеально скрывает навигационную панель после прокрутки указанной суммы, вот повторение вашего кода в действии. может быть, в основной части вашего контента нет свитка ?

вот еще один пример реализации, в котором более подробно описывается, как использовать положение прокрутки

 <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>