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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<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>

$(".box").sticky();

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

$(".box").sticky({
  mode: "triggerStart" // or "triggerEnd"
});

4. Make your header navigation sticky on the top.

$("header").sticky({
  mode: "header"
});

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

$("header").sticky({
  class: "now-sticky"
});

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

$("header").sticky({
  offset: 2
});

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

$("header").sticky({
  trigger: "body"
});

---

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