swissup/module-stickyfill

为Magento 2提供的最精确的粘性polyfill

维护者

详细信息

github.com/swissup/module-stickyfill

源代码

问题

安装次数: 240,600

依赖项: 1

建议者: 0

安全性: 0

星标: 3

关注者: 8

分支: 3

开放问题: 0

语言:JavaScript

类型:magento2-module

1.2.2 2020-07-30 12:42 UTC

MIT e161009cd954d87ca8aa51713cc1c6cd7ec2dd06

This package is auto-updated.

Last update: 2024-08-29 05:06:16 UTC

README

Stickyfill - 是一个将Stickyfill库集成到Magento的Magento2模块。

该模块还提供了附加功能：当元素实际粘滞时，它可以添加sticky-active类。

安装

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

使用方法

基本示例

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

在官方网站上查看所有可用方法： https://github.com/wilddeer/stickyfill#api

高级示例（适用于动态添加的元素）

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

附加功能

Swissup_Stickyfill/js/sticky - 是一个代理到粘性库，当元素粘滞时添加sticky-active类名。它有以下方法

基本用法

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

与matchMedia库一起使用

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);
        }
    });
});