This time I will share jQuery Plugin and tutorial about Smooth Sticky Header In jQuery – sp.stickyHeader.js, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="/path/to/css/sp.stickyHeader.css" /> |
2 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
3 |
<script src="/path/to/js/sp.stickyHeader.js"></script> |
2. Create a header element as follows:
1 |
<header id="demo-header"> |
2 |
<section class="header-top"> |
3 |
Will Be Hidden When The Navbar Is Sticky |
5 |
<section class="navbar"> |
3. Attach the plugin to the header element and we’re done.
1 |
$('#demo-header').spSticyheader({ |
2 |
hideHeaderTarget: '.header-top' |
4. Determine how far the page is scrolled down to make the header element sticky. Defaults to 300.
1 |
$('#demo-header').spSticyheader({ |
5. Add additional CSS class(es) to the header element when stuck.
1 |
$('#demo-header').spSticyheader({ |
2 |
customClass: 'make-small' |
6. Determine whether to disable the sticky header on mobile devices. Defaults to true.
1 |
$('#demo-header').spSticyheader({ |
