jQuery滾動一次動畫

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

向下滾動時，您會多次看到“滾動”輸出。 這是因為滾動的每個小層次都會觸發滾動事件。

一種常見的方法是將您的回調包裝在一個反跳函數中，因此即使在觸發了更多滾動事件的情況下，它也只能在給定的時間內運行一次。

• 在您的頁面中包含節流閥/去抖動jQuery插件-從http://benalman.com/projects/jquery-throttle-debounce-plugin/獲取。

• 像這樣調整代碼：

  函數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代碼塊變得異常奇怪-請注意上面的“ function scrollHandler（）{”行。

更經濟的方法

做同樣事情的一種更簡潔的方法是檢查滾動事件是否在給定的時間內觸發，以及是否沒有假定用戶已停止滾動。 該解決方案是從另一個問題中借用的。

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插件相同的選項和重復使用的潛力-該插件可讓您選擇是在周期的開始還是結束時調用回調函數-但它更苗條。

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