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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="scrollza.js"></script>

2. Create sectioned content for your website.

<article>
  <div class="step">
    Section 1
  </div>
  <div class="step">
    Section 2
  </div>
  <div class="step">
    Section 3
  </div>
  ...
</article>

3. Intialize the plugin on the page sections.

$(function(){

  var scroller = new scrollza();

  scroller.setup('.step',true);

});

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) {
  console.log('active', e.target.getAttribute('data-scrollza-index'));
}, false);

document.addEventListener('deactive', function (e) {
  console.log('deactive', e.target.getAttribute('data-scrollza-index'));
}, false);

---

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