Skip to content
This repository has been archived by the owner on May 28, 2024. It is now read-only.

data-mage-init integration for Headroom.js

Notifications You must be signed in to change notification settings

weprovide/magento2-module-headroom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Magento2 Module Headroom

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