Best method of apply a transition to a fixed header on scroll

Question

Let's say I have a header that is 100px in height. When the user scrolls down, I want to change how the header looks and make it 50px in height.

Would it make more sense to style both header and display the main header by default and then use JavaScript to hide the main header and show the hidden (smaller header) when the user scrolls?

This seems like a really elaborate process which is why I'm not sure if there is an easier/more efficient way to do this.

score 3 · Answer 1 · answered Aug 02 '13 at 02:54

To make it work when somebody scrolls you could try this:

$(function(){
    $(window).scroll(function() { 
        if ($(this).scrollTop() > 100) { 
            $('header').toggleClass('small');
        } 
        else {     
            $('header').toggleClass('small');
        }  
    });
});

score 1 · Answer 2 · answered Aug 02 '13 at 02:25

1

If your headers are compatible, i.e., they have some of the same elements, you should have a class added to the header when you want it to change. The benefit of this, is that CSS transitions can be performed, and all styling stays in your style sheets.

Demo

This could be a piece of your CSS.

header {
    background: black;
    height: 100px;
    transition: all 1s ease;
}

header.small {
    height: 50px;
}

When the small class is added, it transitions between the heigts.

answered Aug 02 '13 at 02:25

Brigand

84,529
20
165
173

Okay, but how would I make it so it only becomes small when the user scrolls? – Djang Mulando Aug 02 '13 at 02:39
http://stackoverflow.com/questions/16442016/jquery-sticky-header-that-shrinks-when-scrolling-down – Brigand Aug 02 '13 at 02:42

Best method of apply a transition to a fixed header on scroll

2 Answers2

Demo