JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

*{
  box-sizing: border-box;
}
div{
  height: 100vh;
  background : purple;
  border: 5px solid white;
}

JavaScript

var state = {
	selected: 0,
  positions: []
}

function onScroll(e){

}

$(document).ready(() => {
	$(window).scroll(onScroll);
  var items = $('div');
  for(var i = 0; i < items.length; i++){
  	state = {
    	...state,
      positions: [
      	...state.positions,
        {
        	top: items.eq(i).offset().top,
          
        }
      ]
    }
  }
  document.write(JSON.stringify(state));
})