weprovide/magento2-module-headroom

This package is abandoned and no longer maintained. No replacement package was suggested.

data-mage-init integration for Headroom.js

Maintainers

Details

github.com/weprovide/magento2-module-headroom

Source

Issues

Installs: 19 141

Dependents: 0

Suggesters: 0

Security: 0

Stars: 5

Watchers: 6

Forks: 3

Open Issues: 0

Language: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

data-mage-init integration for Headroom.js

Installation

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

Usage example

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

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

Using Headroom.js directly

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