Many must've seen this automatic-header-scroll-stick feature. Where a normal looking header suddenly sticks to the page when the page is scrolled.

Gmail to recently introduced such a "auto-sticking-interaction-header". I thought I should give a simple explanation about it.

Demo

In the above HTML page, observe the following

• A well defined stickyheader ID
• jQuery inclusion
• .. and some jQuery magic !

Explained ...

At first we determine the offset of the #stickyheader, and grab the top variable of the object

Once done that, we bind the scroll event/method to the window object using jQuery magic. And to it we do the following

IF window.scrollTop exceeds the #stickyheader's offsetTop, we simply set #stickyheader's css as position: fixed; top: 0px. As soon as window.scrollTop drops below the offset, we make it stick back to its original position using position: static, The default positioning of the element.

Thats it!

Warning: Doesn't work in IE6x, 7, etc or I don't know - I DONT CARE

My favourite Javascript library, jQuery has a new version, jQuery 1.4.

It features some of these

• Even better performance compared to v. 1.3.x
• Serialization like PHP, same param serialized like foo[]=bar1&foo[]=bar2
• Easy Setter Functions
• The performance of .css() and .attr() has been improved
• All Events Can Be Live Events