Add CSS Class To Element When Scrolled To A Section - scrollStyles

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.