Smart Multi-column Sticky Plugin - jQuery ScrollBalance.js

ScrollBalance.js is a lightweight jQuery plugin that enables you to stick multiple page columns to the top of the page while scrolling.

This plugin automatically calculates and compares the heights of different columns and intelligently applies CSS position: fixed property to shorter ones to ensure that the content of each column can be viewed entirely by the user.

How to use it:

1. Install & download.

# NPM
$ npm i scrollbalance

2. Load the ScrollBalance.js after jQuery.

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

3. Initialize the plugin on the columns.

<div class="column">
  Column 1
</div>
<div class="column">
  Column 2
</div>
<div class="column">
  Column 3
</div>
...

var sb = new ScrollBalance($('.column'));

// bind window events (required)
sb.bind();

// call when column content changes
sb.initialize();

4. Automatically disable the plugin when the columns' height is smaller than this value. Default: 200.

var sb = new ScrollBalance($('.column'),{
    threshold: 200,
});

5. Automatically disable the plugin when the screen size is smaller than this value. Default: 0.

var sb = new ScrollBalance($('.column'),{
    minwidth: 768,
});

6. More API methods.

// disable and re-enable the plugin
sb.disable();
sb.enable();

// window resize handler
sb.resize(winWidth, winHeight);

// window scroll handler
sb.scroll(scrollTop, scrollLeft);

// destroy the plugin
sb.teardown();

---

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