JSFiddle - React, Tailwind, and code Playground

by amkrtchyan

HTML

<div id="result">You can see: <span id="result-text"></span></div>
<div class="main">
      <div class="box block1"></div>
      <div class="box block2"></div>
      <div class="box block3"></div>
      <div class="box block4"></div>
      <div class="box block5"></div>
      <div class="box block6"></div>
      <div class="box block7"></div>
      <div class="box block8"></div>
      <div class="box block9"></div>
      <div class="box block10"></div>
</div>

CSS

#result {
  background: #fff;
  border: 1px solid red;
  position: fixed;
  top: 0;
  left: 0;
}

.box {
  height: 800px;
  border: 1px solid;
}

JavaScript

// get top positions and references to all blocks
var pos = $(".box").map(function(){
  var $this = $(this);
  return {
    el: $this,
    top: $this.offset().top
  };
}).get();

var $result = $("#result-text");

// Set document scrolling event handler
$(document).on("scroll", function() {  
  var visible = [];
  var scrollStart = $(this).scrollTop();
  var scrollEnd = scrollStart+$(window).height();
  var vis=[];
  for (var i=0, l=pos.length; i<l; i++) {
    if (pos[i].top < scrollStart || pos[i].top > scrollEnd) { continue; }
    vis.push(pos[i].el.attr("class"));
  }
  $result.text("");
  $result.text(vis.join(", "));

}).scroll();