Switch Fixed Elements On Scroll – immerser.js

Category: Javascript , Recommended | January 20, 2020
Author: dubaua
Views Total: 562
Official Page: Go to website
Last Update: January 20, 2020
License: MIT

Preview:

Switch Fixed Elements On Scroll – immerser.js

Description:

immerser.js is a vanilla JavaScript library which switches fixed elements (and styles) when they come into specific layers on scroll.

The typical use of the library is to change CSS styles or switch elements when you scroll the page to different sections within the document.

Inspired by the jQuery Midnight.js plugin.

Basic usage:

Download & import the immerser.js package.

import Immerser from './immerser.js';
import './immerser.scss';

Add the data-immerser attribute to the fixed container.

<div class="fixed" data-immerser>
</div>

Add children element to the container and specify the ID using the data-immerser-solid attribute:

<div class="fixed" data-immerser>
  <div class="demo" data-immerser-solid="demo">
    Element
  </div>
</div>

Create an immerser layer and specify the CSS class to apply when the fixed element is scrolled into this layer.

<div data-immerser-layer
     data-immerser-layer-config='{
     "demo": "demo-css"
     }'
></div>

Apply your own CSS styles to the element.

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.demo-css  {
  /* your own styles here */
}

Initialize the immerser.js and done.

const instance = new Immerser({
      stylesInCSS: true
});

All possible configuration options.

const instance = new Immerser({

      // an array of class configurations
      // you can use the data-immerser-layer-config attribute to pass this options for each layer
      solidClassnameArray: [],

      // initialize the immerser from a specific viewport width
      fromViewportWidth:1024,

      // wow much next layer should be in viewport to trigger pager
      pagerTreshold: 0.5,

      // ccontroll changing hash on pager active state change
      hasToUpdateHash: false,

      // distance from the viewport top or bottom to the section top or bottom edge in pixels.
      scrollAdjustThreshold: 0,

      // delay after user interaction and before scroll
      scrollAdjustDelay: 600,

      // default CSS classnames
      classnamePager: 'pager',
      classnamePagerLink: 'pager__link',
      classnamePagerLinkActive: 'pager__link--active'
      
});

Callback functions.

const instance = new Immerser({

      onInit: function(){
        // do something
      },

      onBind: function(){
        // do something
      },

      onUnbind: function(){
        // do something
      },

      onDestroy: function(){
        // do something
      },
      
      onActiveLayerChange: function(activeIndex, immerser) {
        // fired on active layer change
      }

});

Changelog:

v2.0.0 (01/20/2020)

  • add mergeOptions, fix bug with scrollAdjust, fix wrong install instructions

v2.0.0 (09/25/2019)

  • translation fixes, update, remove rubbish, bump major version

You Might Be Interested In:


Leave a Reply