JSFiddle - React, Tailwind, and code Playground

HTML

<div id="c1" class="left"><img src="https://dummyimage.com/600x400/000/fff" style="width:100px"/></div>
<div id="c2" class="left"><img src="https://dummyimage.com/500x300/000/fff" style="width:100px"/></div>
<div id="c3" class="left"><img src="https://dummyimage.com/300x200/000/fff" style="width:100px"/></div>
<div class="content">Row 1</div>
<div class="content">Row 2</div>
<div class="content">Row 3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

CSS

.left {
  position: fixed;
  z-index: 1000;
  top: 200px;
  left: 10px;
  display: none;
}

.content {
  height: 400px;
  background: white;
  border-bottom: solid 1px black;
}

JavaScript

$("#c1").fadeIn(1000);
$(document).scroll(function() {
  var pos = $(document).scrollTop();
  if (pos < 200) {
    hideAll("c1");
    $("#c1").fadeIn(1000);
  }
  if (pos > 200 && pos < 600) {
    hideAll("c2");
    $("#c2").fadeIn(1000);
  }
    if (pos > 600 && pos < 1000) {
    hideAll("c3");
    $("#c3").fadeIn(1000);
  }
});

function hideAll(exceptMe) {
  $(".left").each(function(i) {
    if ($(this).attr("id") == exceptMe) return;
    $(this).fadeOut();
  });
}