JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div id="myDiv" data-gunner-options="offset:0,activeclass:in-view">
</div>

Babel + JSX

class ClassOnScroll {
  	constructor(element){
  		this.element = $(element);      
      
      var options = this.element.attr('data-gunner-options');     
      if(options) {
      	options = options.split(',').reduce((acc, cur) => {
        	var data = cur.split(':');
          acc[data[0]] = data[1];
          return acc;
        }, {});
      }     
      
  		this.options = $.extend({}, ClassOnScroll.defaults, options);      
		  this._init();
      
      console.log(this.options);
  	}

  	_init(){
  		var _this = this;
  		let _offset = this.options['offset'];
  		var _activeclass = this.options['activeclass'];  		

  		$(window).scroll(function() {
  		var scroll = $(window).scrollTop();
  			if (scroll >= _offset) {
  				_this._AddClassonScroll(_activeclass);
  			} else {
  				_this._RemoveClassonScroll(_activeclass);
  			}
  		});		
  	}  	

  	_AddClassonScroll(_activeclass){	
  		this.element.addClass(_activeclass);
  	}

  	_RemoveClassonScroll(_activeclass){
  		this.element.removeClass(_activeclass);
  	}	
  }

  ClassOnScroll.defaults = {
		offset: 500,
		activeclass: 'element-in-view',
  };
  
  var myClass = new ClassOnScroll("#myDiv");