JSFiddle - React, Tailwind, and code Playground

HTML

<div id="c">
  <div id="x1" class="item">
    <div class="bar">
      <div class="elem">
        <div>hello</div>
        <div class="foo">world</div>
      </div>
    </div>
  </div>
  <div id="x2" class="item">
    <div class="bar">
      <div class="elem">
        <div>hello</div>
        <div class="foo">world</div>
      </div>
    </div>
  </div>
  <div id="x3" class="item">
    <div class="bar">
      <div class="elem">
        <div>hello</div>
        <div class="foo">world</div>
      </div>
    </div>
  </div>
</div>

CSS

#c {
  height: 3000px;
}

#x1 {
  top: 10px;
}
#x2 {
  top: 130px;
}
#x3 {
  top: 260px;
}

.item {
  /* position: absolute; */
  left: 0px;
  height: 100px;
  width: 400px;
  background-color: gray;
  padding: 4px;
  margin-top: 10px;
}

.bar {
  display: flex;
  align-items: center;
  height: 70px;
  background-color: red;
}

.elem {
  border: 2px solid black;
  margin-left: 2px;
}

JavaScript

setInterval(
	() => {
		$(".foo").toggle()
    console.log(document.scrollingElement.scrollTop)
}, 800)