Question

Google has an excellent blog that has a fairly neat header – as you scroll down the gray bar in the header moves up, until it stops when it is at the top of the screen (it also does some fancy z-index tricks but I’m not interested in those).

While I’m aware of CSS’s position:fixed, what Google seems to have done is combine position:fixed and position:relative based on the current position of the vertical scroll bar. I guess I would be able to duplicate this behaviour using scroll events, fancy math, and some messy scripted jQuery/CSS, but I’m wondering if there is a cleaner, elegant, perhaps third-party solution to do this, as opposed to reinventing the wheel which may or may not work the first time.

What is the cleanest way to get a Google Blog-style header in my web page, preferably using CSS2 and jQuery for x-browser compatibility?

Edit – Bonus points if there’s a way that doesn’t require specifying heights to elements above the element to be scrolled.

Answer 1

Duplicating their css (more or less) with the placeholder, and then using some simple javascript results in a pretty smooth effect.

See http://jsfiddle.net/n9yPH/31/

The Jquery used is this:

$(function()
   {
       var start = $("#second").offset().top;
       $(window).scroll(function(e){
           var top = $("body").scrollTop();
           if (start-top >=0) $("#second").css("top",(start-top)+"px");
           else $("#second").css("top","0px");
       });
   });​