Smooth Sticky Header In jQuery - sp.stickyHeader.js

A lightweight, customizable, smooth, mobile-compatible sticky header plugin created using jQuery, CSS transitions, and CSS position: fixed property.

With the sp.stickyHeader.js plugin, developers can quickly create a smart sticky header navigation on the webpage.

For guidance on how to create sticky elements using JavaScript or Pure CSS, see: 10 Best Sticky Header Navigation Systems.

How to use it:

1. Link to jQuery library and the sp.stickyHeader.js plugin's files in the document.

<link rel="stylesheet" href="/path/to/css/sp.stickyHeader.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/sp.stickyHeader.js"></script>

2. Create a header element as follows:

<header id="demo-header">
  <section class="header-top">
    Will Be Hidden When The Navbar Is Sticky
  </section>
  <section class="navbar">
    Will Be Sticky On Page Scroll
  </section>
</header>

3. Attach the plugin to the header element and we're done.

$('#demo-header').spSticyheader({
  hideHeaderTarget: '.header-top'
})

4. Determine how far the page is scrolled down to make the header element sticky. Defaults to 300.

$('#demo-header').spSticyheader({
  scrollHeader: 200
})

5. Add additional CSS class(es) to the header element when stuck.

$('#demo-header').spSticyheader({
  customClass: 'make-small'
})

6. Determine whether to disable the sticky header on mobile devices. Defaults to true.

$('#demo-header').spSticyheader({
  mobileHeader: false
})

---

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