JSFiddle - React, Tailwind, and code Playground

by Sergio Kagiema

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<section class="h-1000 jumbotron">
  <h2>This is how many times<br/>
  the event is fired: </h2>
  
  <br>
  <br>
  
  <div class="test-area">
  </div>
  
</section>

CSS

.h-1000 {
  height: 1000px;
}

.jumbotron {
  background-color: #eee;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 48px;
  padding-bottom: 48px;
}

JavaScript

$(function(){
	var $testArea = $('.test-area');
  var counter = 0;
  
  var testing = function() {
  		var increasing = counter++;
  		$testArea.html(increasing);
  };
  
  $(window).off('scroll').on('scroll',testing);  
});