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
   
jQuery Plugin To Add Class After X Pixels Scrolled - sticky.js

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.