Tuesday, June 25, 2024
HomejQuerySensible Multi-column Sticky Plugin - jQuery ScrollBalance.js

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 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 class="column">
  Column 2
<div class="column">
  Column 3
var sb = new ScrollBalance($('.column'));

// bind window occasions (required)

// name when column content material adjustments

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

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

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

// destroy the plugin

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.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments