Pin Any Element To The Top Of Page When Scrolling - sticky.js

A tiny and configurable jQuery Sticky plugin that makes it possible to lock the position of any element as it reaches the top of the page while scrolling down.

The plugin provides an easy way to stick any UI components (like site navigation, sidebar widgets) to the top of the viewport, with or without an offset, no matter how you scroll the page.

For additional guidance on how to fix an element on the top of the page using JavaScript or Pure CSS, see 10 Best Sticky Header Navigation Systems and 10 Best Sticky Sidebar Plugins.

How to use it:

1. Get started by loading the jQuery sticky.js plugin after the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.sticky.js"></script>

2. Attach the function sticky to the element which should be fixed on the top while scrolling. That's it.

<nav class="navbar">
  ...
</nav>

jQuery('.navbar').sticky();

3. Apply an offset to the sticky element (like sidebar widget) in cases where you have a sticky navbar.

<aside class="card">
  ...
</aside>

jQuery('.card').sticky({
  offsetY: 90
});

4. Determine whether or not to use the element's outer width. Default: false.

jQuery('.card').sticky({
  outerWidth: true
});

5. Specify the z-index of the element when it gets stuck. Default: 99.

jQuery('.card').sticky({
  zIndex: 9999
});

6. Apply an additional CSS class to the element when it gets stuck. Default: element-sticky.

jQuery('.card').sticky({
  cssClass: 'myClass'
});

7. Disable the sticky behavior when needed.

jQuery('.card').sticky('destroy');

---

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