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

File Size: 5.47 KB
Views Total: 525
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 {
  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 class="scrollstyles-section" data-styles-class="style-2">
  Section Two

<section class="scrollstyles-section" data-styles-class="style-3">
  Section Three

4. Apply CSS styles to the header navigation depending on the scroll position (which section it stays on). {
  /* CSS styles here */
} {
  /* CSS styles here */
} {
  /* CSS styles here */

5. Initialize the plugin on the header navigation and done.


6. Default configuration options.


  // 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.