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

【问题标题】：jQuery: Slide down navigation bar - how to improve animation smoothness?jQuery：向下滑动导航栏 - 如何提高动画流畅度？
【发布时间】：2013-05-30 13:55:08
【问题描述】：

我创建了一个非常简单的向下滑动导航栏，仅当用户向下滚动到主标题时才会显示：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()，动画会有很大的延迟（我假设等待足够的时间来“动画”栏一直到滚动点，或者看起来是这样）。

无论如何，我的问题很简单——如何调整它以使动画流畅？

【问题讨论】：

标签： jquery scroll jquery-animate

【解决方案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);
    });
})();

【讨论】：

【解决方案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);
    }
}

未经测试，但希望它能给你一个想法。

【讨论】：

【解决方案3】：

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

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

或者jquery.animate-enhanced plugin。

【讨论】：