Fix Elements Within A Specific Container – sticky.ts

Preview:

Description:

sticky.ts is a vanilla JavaScript plugin used to pin a single element or multiple elements within a specific container while scrolling down.

How to use it:

Install and import:

# NPM
$ npm install sticky-ts --save

import {Sticky} from 'sticky-ts'

Or directly download the zip and then import the sticky.min.js into the document.

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

Create a new Sticky instance and specify the element to fix on the top.

<div data-sticky-container>
  <div class="sticky">
    Element 1
  </div>
  <div class="sticky">
    Element 2
  </div>
  ...
</div>

let sticky = new Sticky('.element');

Config the sticky.ts library with the following HTML data attributes:

• data-sticky-wrap: Sets true to wrap the sticky element is in the span element. Prevents content from “jumping”. Defaults to false.
• data-margin-top: Top margin in pixels
• data-sticky-for: Specify the breakpoint to disable the Sticky behavior. Defaults to 0.
• data-sticky-class: Additional CSS class(es) when stuck

<div class="sticky" 
     data-sticky-wrap="true"
     data-margin-top="10" 
     data-sticky-for="768" 
     data-sticky-class="custom-class">
     Element
</div>