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.
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
