jQuery Plugin To Switch CSS Classes On Scroll - Switch Styler

Switch Styler is a tiny jQuery plugin used to switch CSS classes of fixed positioned elements as they're scrolled to cover the target elements. Great for interactive one page scrolling website that you can add some fancy CSS3 animations on your fixed elements as your scroll down/up the webpage.

How to use it:

1. Include jQuery JavaScript library and the jQuery switch styler plugin on your webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="path/to/jquery.switchstyler.min.js"></script>

2. Call the plugin on the fixed objects, set the target section and the CSS classes you wish to add/remove on scroll.

$('#fixed').switchstyler({ //fixed object
  on: '.target', //target section
  addClass: 'add-class', //classes to add e.g. 'class1 class4 class6'
  removeClass: 'remove-class' //classes to remove
});

Change log:

2014-11-24

• fix when starting window position different from top

---

This awesome jQuery plugin is developed by cropcrop. For more Advanced Usages, please check the demo page or visit the official website.