Fix Elements Within A Specific Container – sticky.ts

Category: Javascript | November 9, 2018
Author: jziggas
Views Total: 78
Official Page: Go to website
Last Update: November 9, 2018
License: MIT

Preview:

Fix Elements Within A Specific Container – sticky.ts

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>

Leave a Reply