Smart Sticky

A Javascript utility to create content that respect the bounding box of context element and scrollable container element.

Early Release Notice

This is an early release of smart sticky to test within other projects. There is still much work to be completed.

Usage Instructions

Installation

npm install --save-dev smart-sticky

Initialization

new SmartSticky(selectors, margin)

Parameters

selectors:

An object that requires three properties:

• container
• anchor
• sticky

Set each of these properties to a valid selector that would normally be accepted by the querySelector method.

margin (optional):

A number that specifies the pixels of top margin the sticky element and the top of the container element. Defaults to 0.

Example

let sticky = new SmartSticky({
  container: '#container',
  anchor: '.card',
  sticky: '.toolbar',
}, 25);

Contribute

The following commands are available to help contribute:

npm run build : Use to build the non-minified and minified source code into the dists directory.

npm run dev : Use to watch for changes during development.

npm run serve : Use to start development serve that serves files from the public directory.