Stick Sidebar Widgets To The Top Until Reaching The Bottom - sticksy

sticksy is a small and fast JavaScript/jQuery Sticky plugin which makes any element sticky within its parent container using position: absolute attribute.

Use this plugin to fix the sidebar widgets to the top of the page on page scroll until the widgets reach the bottom of their parent container.

How to use it:

1. Install & download the plugin.

# Yarn
$ yarn add sticksy

# NPM
$ npm install sticksy --save

2. Load the sticksy.js script in the document. Note that jQuery is OPTIONAL.

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

3. Or from a CDN.

<script src="https://cdn.jsdelivr.net/npm/sticksy@latest/dist/sticksy.min.js"></script>

4. Attach the plugin to the element which should be fixed on the top when scrolling down.

<aside class="sidebar">
  <div class="widget is-sticky">
    <h2>Widget 1</h2>
  </div>
  <div class="widget">
    <h2>Widget 2</h2>
  </div>
  <div class="widget">
    <h2>Widget 3</h2>
  </div>
</aside>

// As Vanilla JavaScript plugin
new Sticksy(document.querySelector('.is-sticky'));

// As jQuery plugin
$('.widget.is-sticky').sticksy();

5. Specify the distance from the top when the sidebar widgets get stuck. Default: 0.

// As Vanilla JavaScript plugin
new Sticksy(document.querySelector('.is-sticky'),{
    topSpacing: 70
});

// As jQuery plugin
$('.widget.is-sticky').sticksy({
  topSpacing: 70
});

6. Determine whether or not to listen for the DOM changes in the container. Default: false.

// As Vanilla JavaScript plugin
new Sticksy(document.querySelector('.is-sticky'),{
    listen: true
});

// As jQuery plugin
$('.widget.is-sticky').sticksy({
  listen: true
});

7. API methods.

var instance = new Sticksy(document.querySelector('.is-sticky'));

// refresh the current state
instance.refresh();

// hard refresh
instance.hardRefresh();

// enable/disable
instance.enable();
instance.disable();

8. Fire an event when the state of the sticky element has been changed.

var instance = new Sticksy(document.querySelector('.is-sticky'));

instance.onStateChanged = function(state){
  // your handler here
  if (state === 'fixed') alert('it's fixed!')
}

9. Static methods.

// refresh
Sticksy.refreshAll();
Sticksy.hardRefreshAll();

// enable/disable
Sticksy.enableAll();
Sticksy.disableAll();

Changelog:

v0.2.0 (2020-12-05)

• Added new enable() and enableAll() methods.

v0.1.2 (2019-10-01)

• Improved change detection

---

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