Switch Fixed Elements On Scroll – immerser.js

Preview:

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';

// OR
<script src="https://unpkg.com/immerser"></script>

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-pager 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
      pagerLinkActiveClassname: 'pager-link-active',
      // remote scroll handler
      isScrollHandled: true,
      
});

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:

v3.1.1 (01/15/2022)

• add handling DOM change recipe

v3.1.0 (01/12/2022)

• add remote scroll handler option

v3.0.0 (03/02/2021)

• fix immerser didn’t bound without pager

v2.0.3 (05/11/2020)

• fix immerser didn’t bound without pager

v2.0.1 (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