Sticksy.js 📌

Example

var stickyEl = new Sticksy('.js-sticky-widget') // and that's all!

View code

The difference from 'position: sticky'

Sticksy.js is not a 'position: sticky' polyfill. Sticksy impacts on the sibling elements, it makes them move down, i.e., makes the siblings sticky also. Look at example below.

View code

Installation

You can simply install the library from CDN, NPM, Yarn or just download it from this repo.

CDN

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

NPM

$ npm install sticksy --save

Usage

Watch an example.

<!-- Container -->
<aside class="sidebar">
    <!-- Non sticky element -->
    <div class="widget"></div>
    <!-- Sticky element -->
    <div class="widget js-sticky-widget"></div>
    <div class="widget"></div>
    <div class="widget"></div>
</aside>

⚠️ The container shouldn't be absolutely positioned as we use absolute position to stuck the elements to the bottom.

Then you should initialize an instance with a new keyword (it's important):

var stickyElement = new Sticksy('.js-sticky-widget');
// you can handle state changing
stickyEl.onStateChanged = function (state) {
    if(state === 'fixed') {
        stickyEl.nodeRef.classList.add('widget--sticky')
    } else {
        stickyEl.nodeRef.classList.remove('widget--sticky')
    }
}

That's all. 😎 See a full example here.

Usage with Fixed Top Panel

If you have fixed top panel, you can easily deal with it by topSpacing option.

var stickyEl = new Sticksy('.js-sticky-widget', {topSpacing: 70})

View code

Initialize all sticky elements

It is helpful if you have, for example, two sidebars with the same CSS classes.

<aside class="sidebar">
    <div class="widget"></div>
    <!-- Sticky element -->
    <div class="widget js-sticky-widget"></div>
</aside>
<main>
    <!-- Some content here -->
</main>
<aside class="sidebar">
    <!-- Sticky element -->
    <div class="widget js-sticky-widget"></div>
    <div class="widget "></div>
</aside>

var stickyElements = Sticksy.initializeAll('.js-sticky-widget')

View code

Dynamically changing elements

The library can detect changes of the container and its children. It uses MutationObserver for this. If you want the library to react on DOM changes, you need to specify listen option.

var stickyEl = new Sticksy('.js-sticky-widget', {
    listen: true, // Listen for the DOM changes in the container
});

⚠️ Beware! Since the library uses style attribute to change elements position, it ignores changes of width and height properties of sticky elements. Use CSS classes instead.

Usage with JQuery/Zepto

The library is automatically injected into jQuery, so you can use them together.

var stickyElement = $('.widget.js-sticky-widget').sticksy();

API

See the full API in the github repo.

Browser Compatibility

Sticksy.js works in all modern browsers including Internet Explorer 11. If you want the library to react on DOM changes and need to support IE10 or below, you should install Mutation Observer Polyfill.

Performance

Performance is ultra high ⚡.
The library uses the simplest function to calculate the elements state:

Constructor.prototype._calcState = function (windowOffset) {
    if (windowOffset < this._limits.top) {
        return STATES.Static
    } else if (windowOffset >= this._limits.bottom) {
        return STATES.Stuck
    }
    return STATES.Fixed
}

The function doesn't have any complicated calculations. It just compares two variables. Not more. If the calculated state is the same as previous the library does nothing.

Cool, right? 😃

Author

Artem Kovalchuk
GitHub. Facebook. LinkedIn.

License

MIT License