jQuery Plugin To Add Class After X Pixels Scrolled - sticky.js
File Size: | 3.66 KB |
---|---|
Views Total: | 1365 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
sticky.js is a super tiny jQuery plugin that adds a custom CSS class to DOM element when you scroll past a certain amount of pixels from the top of the webpage. A great use case is to create a top navigation menu that will be fixed at the top of the webpage when the user scrolls past x pixels from the top. Also can be used to change the background color of the container when the user scrolls down the webpage.
How to use it:
1. Just include the jQuery sticky.js script after the latest version of jQuery library and we're done.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="sticky.js"></script>
2. Change the background color of the whole page when you scroll past 150px from the top.
$('body').sticky(150, 'custom-class');
.custom-class { background-color: #3BAFDA; }
3. Change the background color of the whole page when you scroll past 150px from the top.
$('body').sticky(150, 'custom-class');
.custom-class { background-color: #3BAFDA; }
4. Make an element sticky when you scroll past 300px from the top.
$('.card').sticky(300, 'custom-class-2');
.custom-class-2 { position: fixed; }
5. You can also trigger the function when the element is about to be scrolled past.
var demo = $('.el').offset().top; $('.el').sticky(demo, 'custm-class');
This awesome jQuery plugin is developed by SMCreativeAB. For more Advanced Usages, please check the demo page or visit the official website.