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

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.