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
I am having the same problem, Can any one help me??
guys, I’ve updated the code. This will remove the bug of jumping sticky header!
Here is some code snippet, taken from “sticky header’ website
function moveMenu(){
var scroll_top = $(document).scrollTop();
if(scroll_top >= 600){
$(‘#main_menu’).css(‘position’, ‘fixed’);
$(‘#main_menu’).css(‘top’, ‘0px’);
$(‘#lead’).css(‘margin-bottom’, ’92px’);
} else {
$(‘#main_menu’).css(‘position’, ‘relative’);
$(‘#main_menu’).css(‘top’, ‘0’);
$(‘#lead’).css(‘margin-bottom’, ‘0’);
}
if(scroll_top overview_top){resetMenu();$(‘#main_menu ul li:nth-child(1) a’).addClass(‘selected’);}
if(scroll_top > the_process_top){resetMenu();$(‘#main_menu ul li:nth-child(2) a’).addClass(‘selected’);}
if(scroll_top > the_topics_top){resetMenu();$(‘#main_menu ul li:nth-child(3) a’).addClass(‘selected’);}
if(scroll_top > ordering_top){resetMenu();$(‘#main_menu ul li:nth-child(4) a’).addClass(‘selected’);}
}
function resetMenu(){
$(‘#main_menu a’).removeClass(‘selected’);
}
Nice tips..but where should we add this code in wordpress?
If you’re planning to roll-out this UI as a modularized feature, then you’ll need to learn more at http://codex.wordpress.org/ otherwise, simply include the JS in the header, add the CSS bits in WordPress’ CSS file (Admin > Appearance > Editor > style.css )
very simple, and i had apply to my blog 😀
thanks
Hi I really love the sticky bar you have done and it works almost perfect for me. I’ve applied it to some headers in a table in the middle of my web page but I can’t figure out how to make the sticky bar headers disappear or return back to the top once I scroll off the table and over content beneath it.
The headers just keep on scrolling beneath other content, I want it to disappear or return to the top once I have reached a certain point at the bottom of the table
can you help please?
Thanks
Are you trying to use the sticky header as a table header row or something ?
You demo is really to look like every title in the same line?!
Hi,
Excellent tutorial. One question for you… what is the purpose of #stickyalias ? I removed that div and the jQuery for #stickyalias from my code and it still seems to work. Why is it included?
Thanks,
Colin
ya, its some trailing piece of code 😛
Hi, thanks for this post.
I have one small query. Whay are we using div > #stickyalias for ?
its just a bit of trailing code.. I’ll update the gist accordingly
Hi
Awesome tutorial. Very useful and informative specially for me. Really appreciate your work. Thanks and keep posting. I got good knowledge from here also about How To: Fix Element Position After Some Scroll Using jQuery. http://www.webdeveloperjuice.com/2011/08/07/how-to-fix-element-position-after-some-scroll-using-jquery/
It worked very well for me. Thank you!