Responsive Sticky Header Plugin For jQuery - Fixed Header

Fixed Header is a simple and very easy to use jQuery plugin that sticks the header navigation to the top of the browser window when scrolling down. It comes with a breakpoint option which allows you to specify the screen width you want this to execute at.

How to use it:

1. Create a header element for your responsive website.

<header id="primary-header">
  jQuery Fixed Header
</header>

2. Wrap your main content into a container named 'page-wrapper'.

<div class="page-wrapper">
  Main Content
</div>

3. Load jQuery library and the jQuery Fixed Header plugin at the bottom of your webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.fixedHeader.js"></script>

4. Make the header element fixed positioned when you scroll down the webpage.

$("#primary-header").fixedHeader({
  contentElement: ".page-wrapper", // main wrapper
  class: "fixed-header" // additional CSS class
});

5. The required CSS styles for the fixed header.

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

6. An optional breakpoint that the fixed header will not be applied if the browser width is less than this value.

$("#primary-header").fixedHeader({
  breakpoint: null
});

Change log:

2015-10-01

• adding semicolon to fix lint errors

---

This awesome jQuery plugin is developed by drewrawitz. For more Advanced Usages, please check the demo page or visit the official website.