Responsive Sticky Header Plugin For jQuery - Fixed Header

File Size: 5.5 KB
Views Total: 2573
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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

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

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

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

<script src="//"></script>
<script src="jquery.fixedHeader.js"></script>

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

  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.

  breakpoint: null

Change log:


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