Switch - sticky focus

Ensure focused element is not under a sticky bar

This plugin is written in ES2015 and available either in uncompiled form in the /lib folder or compiled for ES5 in the /dist folder. If your project uses babel with Webpack or Rollup, you should change the exclusion so this plugin gets compiled or force Webpack or Rollup to fetch the compiled version by using the main entry of the package.json file instead of the module entry.

// .babelrc file or configuration within webpack or rollup
{
  "plugins": [...],
  "exclude": "node_modules/!(@switch-company)/**",
}

Installation

$ npm install @switch-company/sticky-focus

Usage

import stickyFocus from '@switch-company/sticky-focus';

const sticky = new stickyFocus({
  elements,
  padding
});

Parameters

Mandatory parameter

| Name | Type | Description | |-----------------|---------------------|-------------| | elements | Array | Array of HTMLElement that are the sticky elements |

Optional parameter

| Name | Type | Description | |-----------------|---------------------|-------------| | padding | Number | Number of pixels to add between the bottom of the sticky element and the top of the focused element |

Methods

| Name | Description | |----------------------|-------------| | refresh() | Force recalculate the size of the sticky element. Handy if the size changes between breakpoints | | restart( elements ) | Restart listening to the focus events. Pass element if you want to restart the plugin with different elements | | stop() | Stop listening to the focus events | | update( elements ) | Change the array of elements |