Fix Elements Within A Specific Container – sticky.ts

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


Fix Elements Within A Specific Container – sticky.ts


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 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 class="sticky">
    Element 2
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" 

You Might Be Interested In:

Leave a Reply