0

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

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

4

3 回答 3

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);
    });
})();
于 2013-05-30T14:12:55.670 回答
0

当然，您应该获取窗口顶部的位置和栏的状态，而不是让标题在每个滚动事件上下降或隐藏，并且仅在必要时更改它们：

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

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

于 2013-05-30T14:06:37.763 回答
0

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

CSS3 动画应该更快（但我真的不知道在你的情况下你会注意到多少）。您可以尝试查看带有 jQ​​uery 回调的 CSS 之类的东西。

或者jquery.animate-enhanced 插件。

于 2013-05-30T14:06:44.610 回答