@switch-company/sticky-focus

Ensure focused element is not under a sticky element

Usage no npm install needed!

<script type="module">
  import switchCompanyStickyFocus from 'https://cdn.skypack.dev/@switch-company/sticky-focus';
</script>

README

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