scols v0.1.0
SCols
SCols stands for scrolling/sticky columns; take your pick. Basically all it does is implement a fairly simply behaviour to make multiple columns in a single container always remain visible.
It weighs in at 5.1kb minified (1.6kb gzipped).
Usage
$ npm install --save scols
Then you can use it in your project like so:
<div class="container" data-scols>
<div class="column column--short" data-scols-col></div>
<div class="column column--tall" data-scols-col></div>
</div>
var SCols = require('scols');
var container = document.querySelector('[data-scols]');
var scols = new SCols(container);
Stand-alone build
If you prefer a stand-alone library you can include in your pages, you can use
the provided build step (uses browserify): npm run
build
. This will output a few different flavours of scols.js in the dist
directory.
scols.js
- has merely been packaged by browserify to be suitable for browser consumptionscols.min.js
- has also been run through uglifyjsscols.min.js.gz
- has also been run through gzip
You can use scols.min.js
if your server already takes care of gzipping.
API
scols = new SCols(element[, options])
Create a new instance of SCols.
element
- The container elementoptions
- Possible options, listed below
scols.attach()
Attach scols to the element provided to the constructor
scols.detach()
Detach the instance of scols from the dom
Options
colSelector
([data-scols-col]
) - Selector to find columnsfromTop
(0
) - Minimum offset from top of the viewport to maintain
Events
SCols utilises microevent so
you can use .bind
to register for the events below:
position
Emitted whenever column positioning has been done
License
MIT © Chiel Kunkels
9 years ago