JSFiddle - React, Tailwind, and code Playground

by dusset

HTML

<div id="longbox"><div id="cloud1" style="width:35%"></div></div>

CSS

#longbox { width:100%; height: 2000px; background: #666; }
#cloud1 { height:200px; background: red; position:absolute; left: 10%; }

JavaScript

$(window).scroll(function () {
    var currentScroll = $(window).scrollTop();
    var h = $(window).height();
    percentScroll = 1 - currentScroll/h
    $("#cloud1").css('left', 0);
    if (35*percentScroll < 1){
        $("#cloud1").css('left', (35*percentScroll)+'%');
    }else{
        $("#cloud1").css('left', (35*percentScroll)+'%');
    }