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
Content Jumping
Hello Raj,
This plugin was great and exactly what I am looking for. I am facing one small bug in this plugin and I hope you can fix it easily. When I use this for my header and scroll the page and when the sticky part is active then content is jumping upwards to the same height of header and cropping the content. I can send you the code i'm using. Your help is appreciated.
Thanks & Regards
Prabhakar Varma