Animate Header based on different scroll positions

Question

Currently I have a header that animates (squishes) to a smaller version with different logo and different nav after scrolling a certain amount of pixels. If the user scrolls back up past that pixel amount (170 in this case), the header expands back to its normal state. Now (because there are some very long pages on the site) my client wants the header to 'expand' any time the the user is scrolling in up. I think I am getting close, but the events are firing a zillion times when I begin to scroll up the page. Here is my current javascript:

function squishHeader() {
    compactHeader = true;
    header.animate({height: '48px'}, 500);
    mainNav.fadeOut("fast");
    logo.fadeOut("fast");
    scrollLogo.delay(300).slideDown("fast");
    if (overlayIsVisible == true) {
        overlay.fadeOut("slow");
        overlayIsVisible = false;
    }
}

function expandHeader() {
    compactHeader = false;
    header.animate({height: '130px'}, 100);
    scrollLogo.css("display", "none");
    logo.fadeIn("slow");
    mainNav.delay(300).fadeIn("fast");
}


var compactHeader = false;
var lastScrollTop = 0;
$(window).on('scroll', function() {

    if (win.width() > 1024) {
    scrollPosition = $(this).scrollTop();
        if (scrollPosition >= 170 && !compactHeader) {
            squishHeader();
        }
        else if (scrollPosition < 170 && compactHeader) {
            expandHeader();
        }
        else if ( scrollPosition < lastScrollTop && compactHeader){
            expandHeader();
        }
        lastScrollTop = scrollPosition;
    }
});

Can someone please help me with this, it's driving me crazy! Thanks in advance

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

I think you're looking for jQuery Debounce

jQuery throttle / debounce allows you to rate-limit your functions in multiple useful ways. Passing a delay and callback to $.throttle returns a new function that will execute no more than once every delay milliseconds. Passing a delay and callback to $.debounce returns a new function that will execute only once, coalescing multiple sequential calls into a single execution at either the very beginning or end.

Basically this will keep your functions from being called faster than the limit you set. So you can do this (taken from https://stackoverflow.com/a/9144827/2687861) which limits $('#scrollMsg').html('SCROLLING!'); to only being called every 250 milliseconds.

$(window).scroll($.debounce( 250, true, function(){
    $('#scrollMsg').html('SCROLLING!');
}));

Some light reading. http://davidwalsh.name/javascript-debounce-function

edited May 23 '17 at 10:26

Community

1
1

answered Jun 03 '15 at 02:04

Craig Harshbarger

1,863
3
18
29

This helped, but now everytime i move the mouse (every 250 ms) my header changes. I only want it to expand on scroll up. Any ideas. Thanks for your help! – JordanBarber Jun 03 '15 at 12:11
There isn't anything in the code you provided that would cause your `on scroll` function to trigger on mouse move. If you provide your full code I might be able to figure that part out. I created a working fiddle of the effect your trying to achieve https://jsfiddle.net/wfp2uhjb/1/ Notice the extra statement `scrollPosition > lastScrollTop` in the first if statement. That is necessary to keep the header from "squishing" while scrolling up. – Craig Harshbarger Jun 03 '15 at 14:17

Animate Header based on different scroll positions

1 Answers1