JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sample red"></div>
<div class="sample green"></div>
<div class="sample blue"></div>
<br>
<div class="new">aaa</div>

CSS

.sample {
    width:100px;
    height:300px;
    position:fixed;
    left:-102px;
    background:red
}
.green {
    background:green; top: 30px;
}
.blue {
    background:blue; top: 60px;
}
.new {
    margin-top:1000px
}

JavaScript

// cancels any existing animations 
// and animates the "slide out" transition for all samples
function hideDivs() {
    $('.sample').stop().animate({
        left: '-102px'
    }, 1000);
}

// slides in various samples for various scroll positions
// hides any that aren't appropriate for the current position
function showDivs() {
    hideDivs();
    var top = $(document).scrollTop();
    if ( top >= 100 && top < 300 ) {
        $('.red').stop().animate({
            'left': '0px'
        }, 1000);
    } else if (top >= 300 && top < 500) {
        $('.green').stop().animate({
            'left': '0px'
        }, 1000);
    } else if (top >= 500) {
        $('.blue').stop().animate({
            'left': '0px'
        }, 1000);
    } 

}

// scroll events get fired a LOT
// this will end up being very jerky and distracting if we 
// trigger the animation every time the even fires
// So wait for a split-second before starting the animations,
// resetting the timer on each scroll event to ensure that
// the animation doesn't start until the scrolling has stopped.
var timer = null;
$(window).scroll(function () {
  clearTimeout(timer);
  timer = setTimeout(showDivs, 300);
});