jQuery-ScrollTop事件触发动画

Question

I am trying to achieve a scrollTop effect when I scroll under #header. Thing is, it keeps running when I am scrolling, so it's executing a hacky effect. How can I make it run without lagging?

$(window).scroll(function(){
var start = 0;
var position = start + $('body').scrollTop();
var header = $('#header').height();
var breakpoint = parseInt(header)-100;
if( position > breakpoint ) {
    $('.nav-bar-bg').stop().delay(0).animate({
        top: 0
    }, 200);
    $('.nav-bar').stop().delay(0).animate({
        marginTop: -20
    });
    $('.logo a.first').stop().delay(0).animate({
        marginTop: -60
    });
} if ( position < breakpoint ) {
    $('.nav-bar-bg').stop().delay(0).animate({
        top: -100
    }, 200);
    $('.nav-bar').stop().delay(0).animate({
        marginTop: 0
    });
    $('.logo a.first').stop().delay(0).animate({
        marginTop: 0
    });
}
});

Answer 1

That's funny, I was just running into this problem today with a resize handler. What you should do is add a timeOut that will stop your function from continuously executing until the user has finished scrolling. Something like the following:

//concept derived from Дмитрий Гапонов
var scrollFunction;
$(window).on('scroll', function() {
    clearTimeout(resized);
    scrollFunction = setTimeout(setHtmlScale, 100, true);
});

You can experiment with smaller values for the timeOut; 100 is pretty conservative.

I think that should work for you. Let me know if it doesn't.

Answer 2

Here is a fairly long answer to your question. I'm going to provide two variants. The first is a jQuery only one similar to what you posted.

jQuery/JavaScript solution

The main things I changed were I'm caching all of the jQuery selector queries up front so that those (relatively) expensive operations only run once instead of every time the scroll event fires. I also added some simple debouncing so that the scrollFunc doesn't constantly fire.

// Perform and cache all of the selectors first so that it doesn't run on every `scroll` event
var $body = $('body');
var $header = $('#header');
var $navBarBg = $('.nav-bar-bg');
var $navBar = $('.nav-bar');
var $logo = $('.logo a.first');

var scrollFunc = function(){
    var start = 0;
    var position = start + $body.scrollTop();
    var header = $header.height();
    var breakpoint = header - 100; // No need to use parseInt. It would just introduce bugs.
    if( position > breakpoint ) {
        $navBarBg.stop().delay(0).animate({
            top: 0
        }, 200);
        $navBar.stop().delay(0).animate({
            marginTop: -20
        });
        $logo.stop().delay(0).animate({
            marginTop: -60
        });
    } else { // No need to do additional comparison
        $navBarBg).stop().delay(0).animate({
            top: -100
        }, 200);
        $navBar.stop().delay(0).animate({
            marginTop: 0
        });
        $logo.stop().delay(0).animate({
            marginTop: 0
        });
    }
};

$(window).scroll(function(){
    // Debounce requests, so that it doesn't fire everytime the scroll event fires (which is a lot)
    if (scrollFunc.timeout) {
        clearTimeout(scrollFunc.timeout);
    }
    scrollFunc.timeout = setTimeout(scrollFunc, 100);
});

CSS/jQuery solution

In this example I'm adding and removing CSS classes instead of altering inline styling of the elements. This is the preferred way of doing it IMO as you keep the styling stuff in CSS and out of JS. Also, CSS animations usually perform better / more smoothly.

// JavaScript
// Perform and cache all of the selectors first so that it doesn't run on every `scroll` event
var $body = $('body');
var $header = $('#header');

var scrollFunc = function(){
    var start = 0;
    var position = start + $body.scrollTop();
    var header = $header.height();
    var breakpoint = header - 100; // No need to use parseInt. It would just introduce bugs.
    if( position > breakpoint ) {
        $body.addClass('underHeader');
    } else { // No need to do additional comparison
        $body.removeClass('underHeader');
    }
};

$(window).scroll(function(){
    // Debounce requests, so that it doesn't fire everytime the scroll event fires (which is a lot)
    if (scrollFunc.timeout) {
        clearTimeout(scrollFunc.timeout);
    }
    scrollFunc.timeout = setTimeout(scrollFunc, 100);
});

// CSS
.nav-bar-bg, .nav-bar, .logo a.first {
    transition: all 0.5s;
}

.nav-bar-bg {
    top: -100;
}

.nav-bar {
    margin-top: 0;
}

.logo a.first {
    margin-top: 0;
}


.underHeader .nav-bar-bg {
    top: 0;
}

.underHeader .nav-bar {
    margin-top: -20px;
}

.underHeader .logo a.first {
    margin-top: -60px;
}