Question

我创建了一个非常简单的向下滑动导航栏，只有当用户向下滚过主标题时才显示：http://hammr.co/9525666/23/index.html

然而，动画是惊人的，根本不光滑。我怀疑这是因为它在滚动时一直调用，但我不确定如何只调用一次。

我的代码如下所示：

function setOffset() {
    bannerH = $('header').height();
}   

function navTop() {
    if( $(window).scrollTop() > bannerH ) {
        $('#navbar').stop().animate({
            top: 0
        }, 100);
    } else {
        $('#navbar').stop().animate({
            top: -61
        }, 100);
    }
}

setOffset();

$(window).scroll(function(){
    navTop();
});

如果我删除了.stop()动画中有一个很大的延迟（我假设有足够的时间来“动画”一直到滚动点，或者看起来像这样）。

无论如何，我的问题很简单 - 如何调整这个以便动画流畅？

Answer 1

您可以使用缓存元素并尝试去抖一点：

(function () {  //closure to avoid any global variables
    var timeoutScroll,
        $navbar = $('#navbar'),
        $window = $(window);

    function setOffset() {
        bannerH = $('header').height();
    }

    function navTop() {
        if ($window.scrollTop() > bannerH) {
            $navbar.stop().animate({
                top: 0
            }, 100);
        } else {
            $navbar.stop().animate({
                top: -61
            }, 100);
        }
    }

    setOffset();

    $window.scroll(function () {
        clearTimeout(timeoutScroll);
        timeoutScroll = setTimeout(navTop, 35);
    });
})();

Answer 2

当然，您不应该在每个滚动事件中删除或隐藏标题，而应该获取窗口顶部的位置和条形的状态，并且只在必要时更改它们：

function navTop() {

    var navTopShowing = $('#navbar').css('top') == 0;
    var windowTop = $(window).scrollTop();

    // If the top of the window is past the banner, and the banner is not showing, show it
    if ((windowTop > bannerH) && (!navTopShowing))
    {
        $('#navbar').stop().animate({
            top: 0
        }, 100);
    }

    // Hide it if it is showing
    if ((windowTop <= bannerH) && (navTopShowing))
    {
        $('#navbar').stop().animate({
            top: -61
        }, 100);
    }
}

未经测试，但希望它可以为您提供一个想法。

Answer 3

我也相信它很顺利。（至少在我的电脑里）

CSS3动画应该更快（但我真的不知道在你的情况下你会注意到多少）。您可以尝试查看CSS with jQuery callbacks之类的内容。

或jquery.animate-enhanced plugin。

jQuery：向下滑动导航栏 - 如何提高动画的流畅度？

3 个答案: