Sensible Multi-column Sticky Plugin – jQuery ScrollBalance.js

ScrollSteadiness.js is a light-weight jQuery plugin that lets you stick a number of web page columns to the highest of the web page whereas scrolling.

This plugin mechanically calculates and compares the heights of various columns and intelligently applies CSS place: mounted property to shorter ones to make sure that the content material of every column could be considered fully by the person.

The right way to use it:

1. Set up & obtain.

# 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 occasions (required)
sb.bind();

// name when column content material adjustments
sb.initialize();

4. Routinely disable the plugin when the columns’ top is smaller than this worth. Default: 200.

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

5. Routinely disable the plugin when the display dimension is smaller than this worth. Default: 0.

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

6. Extra API strategies.

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

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

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

// destroy the plugin
sb.teardown();

This superior jQuery plugin is developed by gregplaysguitar. For extra Superior Usages, please test the demo web page or go to the official web site.