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

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");
    }
});