Activate/Deactivate Elements On Scroll - jQuery Scrollza

File Size: 5.53 KB
Views Total: 902
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Activate/Deactivate Elements On Scroll - jQuery Scrollza

Scrollza is a small jQuery plugin used to activate and deactivate elements when you scroll down/up the webpage.

The plugin automatically adds and remove the CSS class of 'is-active' when the most of part of a specific page section is visible within the viewport.

How to use it:

1. Insert the jQuery Scrollza plugin's script after jQuery JavaScript library.

<script src="" 
<script src="scrollza.js"></script>

2. Create sectioned content for your website.

  <div class="step">
    Section 1
  <div class="step">
    Section 2
  <div class="step">
    Section 3

3. Intialize the plugin on the page sections.


  var scroller = new scrollza();



4. Style the page section when gets active.

.is-active {
  background-color: #222;
  /* more styles here */

5. Available event handlers which will be fired when the page section is activated or deactivated.

document.addEventListener('active', function (e) {
}, false);

document.addEventListener('deactive', function (e) {
}, false);

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