Sticky NavBar onScroll?

Question

I'm currently building a site for myself, and I found this really awesome effect on multiple sites where the navbar is below an image, but when you scroll past it, it sticks to the top.

Example

How can I achieve this? Also, how can I achieve an effect similar to the one on this website with a similar navbar style?

Answer 1

Here is what @Matthew was talking about:

Check this fiddle http://jsfiddle.net/luckmattos/yp8HK/1/

JQUERY

var num = 200; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

Hope it helps, I used bootstrap navbar.