Vanilla JS Sticky v1.0.0

Vanilla JS sticky block without using extra packages. DEMO

Initialize

Get vanilla-sticky in one of the following ways:

NPM

npm install @uvarov.frontend/vanilla-sticky

Then import it in your javascript file

import VanillaSticky from '@uvarov.frontend/vanilla-sticky';

or Script tag

It’s possible to manually include the necessary <script> tags in the end body of your HTML page and then initialize a calendar via browser globals.

CDN

<script src="https://cdn.jsdelivr.net/npm/@uvarov.frontend/[email protected]/vanilla-sticky.min.js"></script>

or locally

<script src="./js/vanilla-sticky.min.js"></script>

API

The HTMLElement option is mandatory, all other options are optional.

| Name | Default | Description | | ---- | :-----: | ----------- | | HTMLElement | — | DOM object | | position | auto | Specifies which edge the block will stick to. Available options: 'auto', 'top', 'bottom'. | | stretch | true | Stretch the content to the full height of the screen minus the indents if the content is less than the height of the screen. | | resize | true | Recalculate the height of the content and its location each time the screen height changes. | | indents.top | 0 | Specify the top indents after which the block will stick. | | indents.bottom | 0 | Specify the bottom indents after which the block will stick. | | window.min | null | The minimum screen width after which the module stops working. | | window.max | null | The maximum screen width after which the module stops working. |

Usage example

const sidebar = new VanillaSticky({
  HTMLElement: document.querySelector('.sidebar'),
  position: 'bottom',
  stretch: false,
  resize: true,
  indents: {
   top: 70,
   bottom: 10,
  },
  window: {
   min: 1200,
   max: null,
  },
 });

 sidebar.init();

Change settings and update:

sidebar.position = 'top';
sidebar.stretch = true;
sidebar.indents.top = 30;
sidebar.indents.bottom = 20;

sidebar.update();

License

MIT License

Author

Yuri Uvarov ([email protected])