Responsive Customizable Sticky Anything Plugin - jQuery Sticky-Anything

File Size: 17.7 KB
Views Total: 1122
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Customizable Sticky Anything Plugin - jQuery Sticky-Anything

Sticky-Anything is a simple yet highly customizable jQuery plugin that makes anything (e.g. header navigation, sidebar widgets, etc) sticky until a specific element (typically page footer element) is scrolled into view.

How to use it:

1. Just include the JavaScript file jq-sticky-anything.min.js after jQuery library and the Sticky-Anything is ready for use.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jq-sticky-anything.min.js"></script>

2. Call the main function on the target element which should be stuck at the top of the screen when scrolling.

$('.sidebar, nav').stickThis();

3. Set the top offset in pixels when the element is sticky.

$('.sidebar, nav').stickThis({
  top: 70
});

4. Set the min/max screen width to enable the plugin. Useful to disable the plugin on small screen devices such as tablet and mobile.

$('.sidebar, nav').stickThis({
  minscreenwidth: 0,
  maxscreenwidth: 999999
});

5. Set the z-index property of your sticky element.

$('.sidebar, nav').stickThis({
  zindex: 999
});

6. 'Unstick' the element when a specific element is scrolled into view.

$('.sidebar, nav').stickThis({
  pushup: 'footer'
});

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