Position fixed when scrolled passed certain amount of pixels

Question

I'm looking for a way to position the #header element of my page as "Fixed" only after having scrolled downward for about 170 pixels.

Above the header is a banner, so when people scroll down, I would like the banner to scroll away, the header to stay fixed when it hits the top of the window, and the page content to scroll underneath the header.

http://jsfiddle.net/tdskate/zEDMv/

Answer 1

This is the general idea although you may want to fudge around with the css a bit.

var header = $("#header");
$(document).scroll(function(e) {
    if($(this).scrollTop() > $("#banner").height()) {
        header.css({"position" : "fixed", "top" : "0"});
    } else {
        header.css("position", "relative");
    }
});