jQuery Fixed Header Demo

A jQuery Plugin to fix a header to the top of the window and pad down the content to the height of the bar.

Resize your browser

You will see at 750px the height of the header changes, and the padding of the content element is adjusted to the new height.

There's also a breakpoint set at 410px where the fixed header class gets removed and the header becomes static.

Installation

Include jQuery and the jquery.fixedHeader.js script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="jquery.fixedHeader.js"></script>

Bower users can get the source with:

bower install jquery-fixed-header

Basic Usage

An example of how this demo page uses this script:

JS

We want to make sure all of the assets have loaded first before we call the script and calculate the height of the header.

<script>
  $(window).load(function () {
    $("#primary-header").fixedHeader({
      contentElement: ".page-wrapper",
      class: "fixed-header",
      breakpoint: 410
    });
  });
</script>

CSS

Make sure you have the appropriate styles in your stylesheet for when your class gets applied. If you choose to add a class called fixed-header, then you should have something like this in your stylesheet:

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}

Available Options

contentElement	String	Default: body	The element that should be padded down.
class	String	Optional	An optional class that will be applied to the element this plugin is being used on.
breakpoint	Integer	Optional	An optional breakpoint that you can use. The fixed header will not be applied if the browser width is less than this value

Feedback & Support

For any questions, issues, comments, concerns please feel free to open an issue on the GitHub Page, or tweet me directly @DrewRawitz.