Header changes as you scroll down (jQuery)

Question

TechCrunch recently redesigned their site and they have a sweet header that minifies into a thinner version of their branding as you scroll down.

You can see what I mean here: http://techcrunch.com/

How would I go about creating something like this? Is there a tutorial anywhere and if not, can one you kind souls give me some tips on where to start? :)

Answer 1

It's not too hard, it's just a simple .scroll() event. I can't seem to do it in fiddle because of the way the panels are positioned Check EDIT!. But basically what you have is have a div on the top that is position: absolute so it's always on top, then use .scroll()

$("body").scroll( function() {
    var top = $(this).scrollTop();
    // if statement to do changes
});

The scrollTop() method is used to determine how much the body has scrolled.

And depending on where you would like to change your header div, you can have your if statement do many things. In the case of the example you provided, it would be something like

if ( top > 147 )
    // add the TechCrunch div inside the header
else
    // hide the TechCrunch div so that space is transparent and you can see the banner

EDIT

Yay! I was able to make this fiddle to demonstrate the example! :)

Good luck!

Answer 2

Old question but I recently ran into this problem and the accepted solution on here wouldnt work because the height of my div's weren't fixed, so in short here is the solution I came across.

JSfiddle: http://jsfiddle.net/Lighty_46/27f4k/12/

$(document).ready(function () {

var bluebutton = $('#blue_link').offset().top - parseFloat($('#blue_link').css('marginBottom').replace(/auto/, 0));

var bluebuttonbottom = $('#blue_block_bottom').offset().top - $('#main_nav').height() - parseFloat($('#blue_link').css('marginBottom').replace(/auto/, 0));

$(window).scroll(function (event) {
    // what the y position of the scroll is
        var y = $(this).scrollTop();

    // whether that's below the top of the div
        if (y >= bluebutton) {

    // if so, ad the fixed class
        $('.home_nav').addClass('blue_selected');

}

    // whether you have passed the bottom of the div
        if (y >= bluebuttonbottom) {

    // if so remove the selected class
        $('.home_nav').removeClass('blue_selected');

        } else {

    // otherwise remove it
        $('.home_nav').removeClass('blue_selected');
}

});
});

SO basically,

• $('#blue_link') was the top div I wanted to to trigger the class change
• $('#blue_block_bottom') was the div I wanted to to trigger the class removal
• $('#main_nav') was my fixed header

So when the bottom of my header reaches the top of the div, the class "blue_selected" is applied to ".home_nav" ..... then if the bottom of the div passes the bottom of the header the class "blue_selected" is removed from ".home_nav".

You will need to repeat this for each of your buttons with their respective div's

I have tested it in Chrome, Firefox and IE 10 to 8 (works in 8 but the fiddle breaks slightly).

Hope this helps, it probably isn't the best way to do it in all honesty and it probably has some errors in there somewhere but it was the only one I got working.