Question

我有一个简单的脚本基本上等待我的导航滚动离开屏幕，稍微调整它然后从屏幕顶部动画并保持固定直到我向上滚动。

当您滚动浏览菜单时，它会重新设置动画，但每次滚动完成后都会重复此动画。我已经尝试在滚动功能之外添加动画，但它根本没有动画。

我错过了一些简单的事情吗？

    var Header = $('#header'),
        Navbar = $('.navbar'),
        links = $(".navbar ul.nav > li > a"),
        HeaderH = Header.height(),
        NavbarH = Navbar.height();

$(window).scroll(function () {

    if ($(this).scrollTop() > (HeaderH + NavbarH)) {
        Navbar.addClass('navbar-fixed-top')
        links.css('padding', '10px 20px 10px 20px');
        Header.css('margin-bottom', '64px');
        Navbar.css('top', '-64px').animate({'top' : '0'}, 1000);

    }
    else{
        Navbar.removeClass('navbar-fixed-top')
        links.css('padding', '20px');
    }
});

该网站建立在带引导程序的joomla上，因此是navbar-fixed-top样式类。

Answer 1

当用户滚动时，您的滚动处理程序将被多次调用。

为了说明这一点，如果添加控制台日志

    $(window).on('scroll', function(){
    console.log('scroll');
});

你会看到＆＃34;滚动＆＃34;向下滚动时输出多次。这是因为滚动的每个小渐变都会触发滚动事件。

一种常见的方法是将回调包装在去抖动函数中，因此它只在给定时间内运行一次，即使触发了更多滚动事件。

在您的网页中加入限制/去抖jQuery插件 - 从http://benalman.com/projects/jquery-throttle-debounce-plugin/获取。

像这样调整你的代码：

function scrollHandler（）{

    if ($(this).scrollTop() > (HeaderH + NavbarH)) {
        Navbar.addClass('navbar-fixed-top')
        links.css('padding', '10px 20px 10px 20px');
        Header.css('margin-bottom', '64px');
        Navbar.css('top', '-64px').animate({'top': '0'}, 1000);

    }
    else {
        Navbar.removeClass('navbar-fixed-top')
        links.css('padding', '20px');
    }
}

$(window).scroll($.debounce(750, scrollHandler));

这将使其仅响应每750毫秒一次滚动事件 - 根据您的喜好更改持续时间。

Stackoverflow代码块由于某种原因而吓坏了 - 请注意＆＃34;函数scrollHandler（）{＆＃34;在上面。

更经济的方法

执行相同操作的更简洁方法是检查滚动事件是否在给定时间段内被触发，以及它是否还没有假设用户已停止滚动。此解决方案借鉴this other question。

function scrollHandler() {
    if ($(this).scrollTop() > (HeaderH + NavbarH)) {
        Navbar.addClass('navbar-fixed-top');
        links.css('padding', '10px 20px 10px 20px');
        Header.css('margin-bottom', '64px');
        Navbar.css('top', '-64px').animate({'top': '0'}, 1000);
    }
    else {
        Navbar.removeClass('navbar-fixed-top');
        links.css('padding', '20px');
    }
}

$(window).on('scroll', function () {
    clearTimeout($.data(this, 'timer'));
    $.data(this, 'timer', setTimeout(function () {
        scrollHandler();
    }, 250));
});

这种方法并没有为您提供与debounce插件相同的选项和重复使用的可能性 - 该插件可让您选择是否在期间的开始或结束时调用您的回调 - 但它＆＃39;苗条。

Answer 2

尝试类似

的内容

    var Header = $('#header'),
    Navbar = $('.navbar'),
    links = $(".navbar ul.nav > li > a"),
    HeaderH = Header.height(),
    NavbarH = Navbar.height();
    var scrolled = false;

$(window).scroll(function () {

 if ($(this).scrollTop() > (HeaderH + NavbarH) && !scrolled) {
    Navbar.addClass('navbar-fixed-top')
    links.css('padding', '10px 20px 10px 20px');
    Header.css('margin-bottom', '64px');
    Navbar.css('top', '-64px').animate({'top' : '0'}, 1000);
    scrolled = true;
 }
 else{
    Navbar.removeClass('navbar-fixed-top')
    links.css('padding', '20px');
    scrolled = false;
 }
});

jQuery在滚动时动画一次

2 个答案: