Automatic Header stick to scroll with jQuery

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

18 thoughts on “Automatic Header stick to scroll with jQuery”

  1. 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’);
    }

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.