1.0.0 • Published 2 years ago
@uvarov.frontend/vanilla-sticky v1.0.0
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-stickyThen 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/vanilla-sticky@1.0.0/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 (uvarov.frontend@gmail.com)