CSS/Jquery Fixed Header + Change

Question

i want to acheive this effect

Notice when you scroll down how the header stays fixed but also changes a bit. How can I do that?

I know how to do it with CSS but want to add more style to the header.

Zoltan Toth · Accepted Answer · 2012-11-11 01:55:35Z

3

Just view the source of the page:

$(window).scroll(function(){
    if ( $('div.wrapper').width() >= 660 ) {
        if ( $(this).scrollTop() > pos.top+header.height() && header.hasClass('default') ) {
            header.fadeOut('fast', function(){
                $(this).removeClass('default').addClass('scrolling').fadeIn('fast');
            });
        } else if ( $(this).scrollTop() <= pos.top+header.height() && header.hasClass('scrolling') ) {
            header.fadeOut('fast', function(){
                $(this).removeClass('scrolling').addClass('default').fadeIn('fast');
            });
        }
    }
});

There is a scroll listener and when the event occurs - the class of the menu is getting toggled between .default and .scrolling

answered Nov 11, 2012 at 1:55

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS/Jquery Fixed Header + Change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related