Top image collapsed into navbar after scrolling down

Question

So I am learning bootstrap and one of the really neat effects I came across was on the website of spook-studio [1] was when you scroll past the top navbar logo, the big logo collapses into a small version of it and along with it appears the navbar.

I know how to make the navbar and then make each of the sections of navbar correspond to the page as you scroll down, but how do you go about making the nav bar appear after scrolling?

Thank you so much for any links to questions or pointers on where to go read more!

[1] http://www.spookstudio.com/

Answer 1

jsFiddle : http://jsfiddle.net/8My5v/ (minor update)

To achieve that you can use jquery's scroll() and scrollTop() method.

Now this is how you can do it :

in scroll for window,

Detect window scroll amount (ie if its 0 or more).

If window is scrolled down -> show menu

If window is scrolled to top -> hide menu

Code in demo :

$(window).scroll(function () {
    if ($(window).scrollTop() == 0) {
        $('.menu').fadeOut(200);
        $('.welcome').animate({
            height: "300px"
        }, 300);
        shown = false;
    } else if ($(window).scrollTop() > 0 && !shown) {
        $('.menu').fadeIn(200);
        $('.welcome').animate({
            height: "150px"
        }, 300);
        shown = true;
    }
});