jQuery Plugin For Responsive Sticky Site Header - Stickable

Stickable is a really simple and cross-browser jQuery plugin which makes your header navigation fixed at the top of the screen on vertical page scrolling.

The plugin simply check the scroll events and add a CSS class '.istick' to your header navigation when you scroll past it.

How to use it:

1. Create a header navigation to be fixed at the top of the browser window when scrolling down.

<div id="sticky">Header Navigation</div>

2. Include jQuery library and the minified version of the jQuery stickable plugin at the bottom of the webpage.

<div id="sticky">Header Navigation</div>

3. Call the function on the header navigation.

$( '#sticky' ).stickable();

4. Make it sticky relative to the browser window using CSS 'position' property:

.stick {
  margin-top: 0 !important;
  position: fixed;
  top: 0;
  z-index: 10000;
}

Changelog:

2019-03-27

• JS update

---

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