Smooth Sticky Header In jQuery - sp.stickyHeader.js

File Size: 3.44 KB
Views Total: 3424
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 class="navbar">
    Will Be Sticky On Page Scroll

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

  hideHeaderTarget: '.header-top'

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

  scrollHeader: 200

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

  customClass: 'make-small'

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

  mobileHeader: false

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