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

17 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

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

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>