Add CSS Class To Element When Scrolled To A Section - scrollStyles
File Size: | 5.47 KB |
---|---|
Views Total: | 541 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

scrollStyles is an ultra-light (1kb) jQuery plugin that dynamically adds a CSS class to an element depending on the page section you're viewing on while scrolling up/down the webpage.
Two Typical Usages:
- Diff Text and Background color (e.g. sticky header + page sections with different bg colors).
- Animates an element when it is scrolled to a specific page section within the document.
How to use it:
1. Load the JavaScript jquery.scrollstyles.min.js
after loading jQuery JavaScript library.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.scrollstyles.min.js"></script>
2. Create a header navigation on the page.
<header class="header"> I Am A Sticky Header Navigation </header>
.header { position: fixed; top: 0; left: 0; /* more styles here */ }
3. Create page sections and specify the CSS class applied to the header navigation using the data-styles-class
attribute.
<section class="scrollstyles-section" data-styles-class="style-1"> Section One </section> <section class="scrollstyles-section" data-styles-class="style-2"> Section Two </section> <section class="scrollstyles-section" data-styles-class="style-3"> Section Three </section>
4. Apply CSS styles to the header navigation depending on the scroll position (which section it stays on).
.header.style-1 { /* CSS styles here */ } .header.style-2 { /* CSS styles here */ } .header.style-3 { /* CSS styles here */ }
5. Initialize the plugin on the header navigation and done.
$(function(){ $('.header').scrollStyles(); });
6. Default configuration options.
$('.header').scrollStyles({ // the frame rate of scrolling "frameRate": 500, // offset in pixels "scrollOffset": 50, // CSS selector of page sections "sectionElements": '.scrollstyles-section' });
This awesome jQuery plugin is developed by balix. For more Advanced Usages, please check the demo page or visit the official website.