动画粘滞导航

Question

我正在尝试制作动画粘性导航，在页面向下滚动到955px后，在页面顶部滑动，如果页面滚动到低于955px，则向上滑动。我设法通过在css中将top设置为0，并在jquery中将top设置为172px，将页边距设置为-172px来实现第一步的动画效果，但我不知道在页面向上滚动后如何反转。

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()，对于滑动，我使用了相同的代码行，然后将顶部设置为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');
}

}).scroll()；