JSFiddle - React, Tailwind, and code Playground

by Dmitriy Belyaev

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="simple">Просто так</div>
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
<div class="line-4"></div>
<div class="line-5"></div>

CSS

.simple{
  height:50px;
  width: 80%;
  margin: 100px auto;
  background:#8F88C9;
  opacity:.5;
}
div[class^="line"]{
  height: 350px;
}
.line-1{background:red;}
.line-2{background:green;}
.line-3{background:blue;}
.line-4{background:black;}
.line-5{background:yellow;}

JavaScript

$(document).ready(function(){
 $('.simple').scrollObservableY(function ($element, scrollValue) {
        $element.css({'transform':'translateY('+scrollValue+'px)'})
    })
 })
 
 

$.fn.scrollObservableY = function(callback) {
    let _this = this;
    _this.scrollObservableData = {X:0,Y:0};
    $(window).on('scroll', function () {
        if(_this.scrollObservableData.Y!== window.scrollY){
            callback(_this, window.scrollY);
        }
        _this.scrollObservableData = {X:window.scrollX,Y:window.scrollY};
    });
};