javascript 苗条-隐藏和显示滚动导航

3mpgtkmj  于 2022-12-25  发布在  Java
关注(0)|答案(2)|浏览(182)

我希望导航隐藏向下滚动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>
ktecyv1j

ktecyv1j1#

你的代码似乎完美地隐藏了导航栏后,你滚动指定的数额,这里是一个REPL的代码在行动。也许你的内容的主体没有滚动?
这里是进一步详述如何使用滚动位置的另一实现REPL

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

pftdvrlh2#

在你的REPL中,看起来导航在向上滚动时不会重新出现。它只会出现在页面的顶部。
例如,我还尝试在用户向上滚动30px时显示导航,我认为这也是OP所要求的。
我发现一个REPL已经成功地用jQuery实现了这个功能,但是我现在还在努力让它在Svelte中工作,有什么线索吗?
如果我成功了,我会回来的。

// 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;
}

相关问题