swissup/module-stickyfill

The most accurate sticky polyfill out in the wild for Magento 2

1.2.2 2020-07-30 12:42 UTC

MIT

README

Stickyfill - is a Magento2 module that integrates Stickyfill library into Magento.

The module also provides additional features: it may add sticky-active class, when element is actually stuck at the moment.

Installation

cd <magento_root>
composer require swissup/module-stickyfill
bin/magento module:enable Swissup_Stickyfill
bin/magento setup:upgrade

Usage

Basic example:

require(['stickyfill'], function (Stickyfill) {
    Stickyfill.add(document.querySelectorAll('.sidebar'));
});

See all available methods at official site: https://github.com/wilddeer/stickyfill#api

Advanced example (works for dynamically added elements):

require([
    'Magento_Ui/js/lib/view/utils/async',
    'stickyfill'
], function ($, Stickyfill) {
    $.async('.sidebar', function (el) {
        Stickyfill.add(el);
    });
});

Additional features

Swissup_Stickyfill/js/sticky - is a proxy to stickyfill library that adds sticky-active class name when element is stuck. It has the following methods:

Basic usage:

require([
    'Swissup_Stickyfill/js/sticky'
], function (sticky) {
    sticky.add(document.querySelectorAll('.sidebar'))
});

Using with matchMedia library:

require([
    'matchMedia',
    'Swissup_Stickyfill/js/sticky'
], function (mediaCheck, sticky) {
    'use strict';

    var sidebar = document.querySelectorAll('.sidebar');

    mediaCheck({
        media: '(min-width: 768px)',
        entry: function () {
            sticky.add(sidebar);
        },
        exit: function () {
            sticky.remove(sidebar);
        }
    });
});