enavu webdevmania tutsvalley psdestination
visit the enavu network
No Comments Article Title Overlay

Easy jQuery Sticky Sub Header Solution

Create a simple and awesome sticky sub header to follow the user as they scroll with jQuery.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

For a long time i’ve known I will need something like this, now that I did looking at all the solutions online i’m not happy with the complexity. So here is my simple version.

You’ll need 3 things: HTML, CSS, and some JS. That’s it. Let’s do it.

<header>
    logo
</header>
<div id="sub_header">
    some sub header
</div>

Simple, just a header and sub header.

The CSS:

body { height:2000px; }
    header { height:52px; border-bottom:1px solid #000; padding:10px 0; }
    #sub_header { height:18px; border-bottom:1px solid #ccc; padding:5px 0; }
    #sub_header.sticky { position:fixed; top:0px; left:0px; right:0px; z-index:99999; }

Notice most of the fluff above is just for making it easier to see what’s happening, only interesting part is the #sub_header.active. It is responsible for making our sub header sticky once the jQuery tells it to (adds appropriate class).

And for the fun stuff:

$(function(){
    $(window).scroll(function(){
        // make sure you change 52 to your headers height plus your padding
        if ($(window).scrollTop() > 72) {
            $("#sub_header").addClass("sticky");
        } else {
            $("#sub_header").removeClass("sticky");
        }
    });
});

That’s about it. Here is example http://jsfiddle.net/HbVte/1/embedded/result/ scroll down to see the effect take place! Haven’t tested this on many browsers, but nothing in the css is that tricky, so I wouldn’t be surprised if this works all the way down to IE6.

Related posts:

  1. How to make a completely reusable jquery modal window
  2. Create a Disappearing jQuery Dialog Message (Growl Like)
  3. Top 10 jQuery Modal Box Plugins
  4. How To: Jquery Scroll to Anchor and Scroll To Top (simple)
  5. CSS Tabs

Did you absolutely LOVE this article... share it!

Comments

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting