Stick Any Element To The Top Without Jumping - jQuery StickyJS

File Size: 4.16 KB
Views Total: 816
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Stick Any Element To The Top Without Jumping - jQuery StickyJS

StickyJS is an ultra-light and cross-browser jQuery plugin that makes any element within the document always stay visible on scroll.

Heavily based on the CSS position: fixed attribute.

How to use it:

1. Download the StickyJS plugin and link it to your document, after the latest jQuery library.

<script src="" 
<link rel="stylesheet" href="sticky.css">
<script src="sticky.js"></script>

2. Make an element always be sticky on the top on page scroll.

<div class="box"></div>

3. Make the element always be sticky when you scroll past it.

  mode: "triggerStart" // or "triggerEnd"

4. Make your header navigation sticky on the top.

  mode: "header"

5. Set the CSS class which will be attached to the element when getting stuck.

  class: "now-sticky"

6. Set the top offset to trigger the Sticky behavior.

  offset: 2

7. Customize the container element in which you want to detect the scroll event.

  trigger: "body"

This awesome jQuery plugin is developed by ThomasCarterUK. For more Advanced Usages, please check the demo page or visit the official website.