Svelte - 스크롤에 네비게이션 숨기기 및 표시

Svelte - 스크롤에 네비게이션 숨기기 및 표시

나는 페이지의 어느 부분에 있든 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>

---

지정된 양을 스크롤한 후 코드가 탐색 모음을 완벽하게 숨기는 것 같습니다. 다음은 실행 중인 코드입니다. 콘텐츠 본문에 스크롤이 없는 것이 아닐까요?

여기 스크롤 위치를 사용하는 방법을 더 자세히 설명하는 다른 구현이 있습니다

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

---

REPL에서는 위로 스크롤할 때 네비게이션이 다시 나타나지 않는 것 같습니다. 페이지 맨 위에만 나타납니다.

예를 들어, 사용자가 페이지의 아무 곳에서나 30px씩 스크롤할 때 나는 또한 네비게이션을 보여주려고 한다. 나는 그것이 OP가 요구하는 것이기도 했다고 생각한다.

나는 jQuery로 성공적으로 그것을 하는 것을 발견했지만 지금은 그것을 스벨테에서 작동시키기 위해 고군분투하고 있다. 단서는?

나는 성공하면 되돌아갈 것이다.

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }
    
    lastScrollTop = st;
}

---

여기 있는 답들은 나에게 도움이 되지 않았다. 이것은 제가 이것을 성취하기 위해 사용하는 것을 위해 만든 것입니다. 제가 어떻게 그것을 했는지;

1. 스크롤 이벤트의 끝에 스크롤 위치(에 있음)를 저장할 변수를 만듭니다([라고 부름]).

let lastScrollPosition = 0

2. 스크롤 이벤트가 시작될 때 내부에서 현재 스크롤 위치를 가져와 [1.]에서 마지막으로 생성한 스크롤 위치 변수와 비교합니다()

<svelte:window on:scroll={()=>{
    var currentScrollposition = window.pageYOffset || document.documentElement.scrollTop; //Get current scroll position
    if (currentScrollposition > lastScrollPosition) {
    showNav = false
    }else{ 
    showNav = true
    }
    lastScrollPosition = currentScrollposition;
    }}></svelte:window>

3. 현재 스크롤 위치가 보다 크면 false이고 그렇지 않으면 true입니다. NB: 또는 Svelte Conditional()을 사용하여 스크롤 다운 시 숨김 및 스크롤 업 시 표시를 수행할 수 있습니다(이 예에서는 CSS..).

<main>
<div class="nav {showNav == true? "show": "hide" }" >
    Nav bar
</div>
    <div class="content">
        Content
    </div>
</main>

<style>
    .nav{
        background-color: gray;
        padding: 6px;
        position: fixed;
        top: 0;
        width: 100%;
    }
    .content{
        background-color: green;
        margin-top: 25px;
        padding: 6px;
        width: 100%;
        height: 2300px;
    }
    .hide{
        display: none;
    }
    .show{
        display: unset;
    }
</style>