Fixed Header Revisited

Over the past year I’ve recieved a lot of emails thanking me for going through the steps of adding a fixed header region to a drupal website. The post seems fairly popular as well. So now, I’ll introduce another way to create a fixed header using strictly jQuery.  This is also called a “sticky header”, but I prefer to call it fixed since the positioning is changed to “fixed”.

There may be lots of other ways to do this, however, this one is the simplest I’ve found so far.

The previous post about fixed header regions really only applied to Drupal 7. With these instructions, you’ll be able to create a fixed header in any CMS as well as flat HTML sites.

First Things First

Before you do anything else, add the Jquery plugin to your website if you don’t have it already. I let Google host my jQuery plugins because they do a very good job of maintaining it.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Next you’re gonna want to create a new javascript file with the jquery inside that will power the fixed header.

Jquery Fixed Header

Doesn’t matter if you want the navigation or something else to stick to the top, it will all work the same way. Here’s the code.

function fixDiv() {
  var $cache = $('#header');
  if ($(window).scrollTop() > 0)
    $cache.css({'position': 'fixed', 'top': '0px','display': 'block', 'z-index': '2', 'box-shadow': '0px 3px 12px #666'});
  else
    $cache.css({'position': 'relative', 'top': '0px','display': 'block', 'z-index': '0', 'box-shadow': 'none'});
}
jQuery(window).scroll(fixDiv);
fixDiv();

Let’s break it down…

function fixDiv() {
  var $cache = $('#header');
  if ($(window).scrollTop() > 0)

This part of the code is running a function called fixDiv, but this could be named anything really. Now, the next line is important. The various sites that I’ve used this on I’m usually using the header div or the navigation div. Either way, you’ll use the div you want to make fixed to the top of the browser here where ‘#header’ is. The next line is where the magic takes place. This is “listening” for scrolling action. Right now this is set to zero. That means that immediately when you scroll down, the header div is fixed. You can change this zero to 100, or 120, or anything really. If you change it to 100, that will tell the function not to make the header fixed until you scroll down the page 100 pixels. Now for the next part of the code….

     
    $cache.css({'position': 'fixed', 'top': '0px','display': 'block', 'z-index': '2', 'box-shadow': '0px 3px 12px #666'});
  else
    $cache.css({'position': 'relative', 'top': '0px','display': 'block', 'z-index': '0', 'box-shadow': 'none'});
}

This is the really cool part. At least it is to me. The first line here says “ok browser, when you fix the header, I want all of these stylings to be given to it.” Notice the “position: fixed, top: 0px” part. That is really what you need to make this work. The rest is additional styling I’ve used to make the header look better. The position needs to be fixed, and top needs to be set to zero. Next I’ve given it a display of ‘block’, a z-index of 2 (so that it will go over all elements as you scroll down), and I’ve added a box shadow so that it looks more apparent that the div is fixed and everything is going under it. Lastly…

jQuery(window).scroll(fixDiv);
fixDiv();

This last section just tells the window to execute the script on scrolling. That’s it. Email me if you have questions at all!