Question

我尝试制作动画粘性导航，在向下滚动955px后在页面顶部滑动，如果页面滚动到小于955px，则向上滑动。我设法通过在css中将top设置为0并将margin-top设置为-172px并在jquery中将顶部设置为172px来设置动画，但我不知道如何在页面向上滚动后将其反转。< / p>

HTML：

<header>
    <nav>
        <a href="#torte">Torte</a>
        <a href="#kolaci">Kolači</a>
        <a href="#napici">Napici</a>
        <a href="#slatka-peciva">Slatka Peciva</a>
        <a href="#jela">Jela</a>
        <a href="#slana-peciva">Slana Peciva</a>
        <a href="#oblogu">O blogu</a>
        <a href="#contact">Kontakt</a>
        <a href="#ostalo">Ostalo</a>
    </nav>
</header>

的CSS：

header{
    height: 125px;
    left: 0;
    position: fixed;
    top: 0;
    margin-top: -172px;
    width: 100%;
    z-index: 100;
}

jQuery的：

/* sticky navigation, active class */
$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 955) {
        $('header').animate({'top':172});
        $('section').each(function(i) {
            if ($(this).position().top <= windscroll + 50) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });

    } else {
        /*
        code for the slide up animation goes here
        */
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();

如何在页面再次向上滚动后反转动画？

Answer 1

我明白了。这很简单。只需在动画前面添加.stop（）动画中的幻灯片，然后向上滑动我使用相同的代码行，然后将top设置为0以反转它。

$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 955) {
    $('header').stop().animate({'top':172});
    $('section').each(function(i) {
        if ($(this).position().top <= windscroll + 50) {
            $('nav a.active').removeClass('active');
            $('nav a').eq(i).addClass('active');
        }
    });

} else {
    $('header').stop().animate({'top':0});
    $('nav a.active').removeClass('active');
    $('nav a:first').addClass('active');
}

}）滚动（）;

动画粘性导航

1 个答案: