jQuery Plugin For Multiple Sticky Elements - stickyElement.js

File Size: 80.6 KB
Views Total: 1131
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Multiple Sticky Elements - stickyElement.js

Yet another mobile-friendly jQuery sticky element plugin which makes multiple elements stick to the top of the webpage and comes with a lots of options to customize the 'Sticky' behavior.

How to use it:

1. Import the latest jQuery library (slim build) and the jQuery stickyElement.js script into the page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="stickyElement.min.js"></script>

2. Call the function stickyElement on the target elements which should be sticky on page scroll.

<nav id="example1">
  Sticky Nav Here
</nav>
$('#example').stickyElement();

3. Customize the sticky plugin with the following options.

$('#example').stickyElement({

  // top offset
  top: 0,

  // left offset
  left: null,

  // min/max width to trigger the plugin
  minWidth: null,
  maxWidth: null,

  // additional CSS for the sticky element(s)
  addClass: null,

  // additional attributes for the sticky element(s)
  addAttributes: null,

  // enable/disable fade animation
  fade: false
  
});

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