JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<header>
  hello world
</header>
<div id="body">

  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusamus, corporis, consequatur exercitationem nesciunt sequi asperiores perspiciatis quae minima ullam id eos quaerat culpa labore. Eaque quae id, obcaecati minima.
  </div><div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusamus, corporis, consequatur exercitationem nesciunt sequi asperiores perspiciatis quae minima ullam id eos quaerat culpa labore. Eaque quae id, obcaecati minima.
  </div><div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusamus, corporis, consequatur exercitationem nesciunt sequi asperiores perspiciatis quae minima ullam id eos quaerat culpa labore. Eaque quae id, obcaecati minima.
  </div><div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusamus, corporis, consequatur exercitationem nesciunt sequi asperiores perspiciatis quae minima ullam id eos quaerat culpa labore. Eaque quae id, obcaecati minima.
  </div><div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusamus, corporis, consequatur exercitationem nesciunt sequi asperiores perspiciatis quae minima ullam id eos quaerat culpa labore. Eaque quae id, obcaecati minima.
  </div><div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusamus, corporis, consequatur exercitationem nesciunt sequi asperiores perspiciatis quae minima ullam id eos quaerat culpa labore. Eaque quae id, obcaecati minima.
  </div><div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusamus, corporis, consequatur exercitationem nesciunt sequi asperiores perspiciatis quae minima ullam id eos quaerat culpa labore. Eaque quae id, obcaecati minima.
  </div><div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis accusamus, corporis,...

CSS

body {
  margin: 0;
}
div#body {
  width: 100%;
  background: red;
  padding-top: 108px;
}
header {
  font-size: 50px;padding: 10px;
  position: fixed; 
  background: purple;
  width: 100%;
  text-align: center;
  top: 0;
  z-index: 2;
}

JavaScript

(function(root, factory) {
    'use strict';

    if (typeof define === 'function' && define.amd) {
        define([], factory);
    }
    else if (typeof exports === 'object') {
        module.exports = factory();
    }
    else {
        root.kfn_scroll = factory();
    }
}(this, (function() {

    'use strict';
    
        var defaults = {
            wrapper: '#kfn_scroll',
            targets : '.kfn_scroll-el',
            wrapperSpeed: 0.08,
            targetSpeed: 0.02,
            targetPercentage: 0.1
        };

        var requestAnimationFrame = 
            window.requestAnimationFrame || window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
            window.requestAnimationFrame = requestAnimationFrame;
        var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

        var extend = function () {

            var extended = {};
            var deep = false;
            var i = 0;
            var length = arguments.length;

            var merge = function (obj) {
                for (var prop in obj) {
                    if (obj.hasOwnProperty(prop)) {
                        extended[prop] = obj[prop];
                    }
                }
            };

            for ( ; i < length; i++ ) {
                var obj = arguments[i];
                merge(obj);
            }

            return extended;

        };

        var kfn_scroll = function(){
            this.Targets = [];
            this.TargetsLength = 0;
            this.wrapper = '';
            this.windowHeight = 0;
            this.wapperOffset = 0;
        };
        kfn_scroll.prototype = {
            isAnimate: false,
            isResize : false,
            scrollId: "",
            resizeId: "",
            init : function(options){
                this.settings = extend(defaults, options || {});
                this.wrapper =...