weprovide/magento2-module-headroom

此包已被放弃且不再维护。未建议替代包。

Headroom.js 的 data-mage-init 集成

维护者

详细信息

github.com/weprovide/magento2-module-headroom

源代码

问题

安装次数： 18,975

依赖者: 0

建议者: 0

安全性: 0

星标: 5

关注者: 6

分支: 3

开放问题: 0

语言：JavaScript

1.0.7 2022-12-08 12:00 UTC

proprietary 35807b83b4967207a6a8209afc8f2998be9325ed

  • Jeroen Alewijns <jeroen.woop@weprovide.com>

This package is auto-updated.

Last update: 2024-05-28 09:45:59 UTC

README

Headroom.js 的 data-mage-init 集成

安装

  1. composer require weprovide/magento2-module-headroom
  2. bin/magento setup:upgrade

使用示例

<script type="text/x-magento-init">
  {
    ".page-header": {
      "WeProvide_Headroom/headroom": {
         "classes": {
             "initial": "animated",
             "pinned": "slideDown",
             "unpinned": "slideUp"
         }
       }
    }
  }
</script>

程序化 API

define(['WeProvide_Headroom/headroom'], function (headroom) {
  // Headroom configuration. See http://wicky.nillia.ms/headroom.js for all options
  var configuration = {
    classes: {
      initial: 'animated',
      pinned: 'slideDown',
      unpinned: 'slideUp'
    }
  }

  // Element to intialize Headroom on.
  var element = document.querySelector("header")

  var instance = headroom(configuration, element)

  // Dynamically update options after initializing
  instance.classes.pinned = 'slideDown-new'
});

直接使用 Headroom.js

define(['headroom'], function (Headroom) {
  // Headroom configuration. See http://wicky.nillia.ms/headroom.js for all options
  var configuration = {}

  // Element to intialize Headroom on.
  var element = document.querySelector("header")

  var instance = new Headroom(element, configuration)

  instance.init()
});