JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div class="up">
  TOP
</div>
<div class="card" style="background-color: red">
  1
  <div class="checker">

  </div>
</div>


<h3>
  H3
</h3>

CSS

div{
  width:90vw;
  height:100vh;
  
}

.up{
  
}

.card{
  position: sticky;
  top:0;
}

*{
  margin:0;
  padding:0;
}

h3{
  position: fixed;
  top:50%;
  left:50%;
}

.checker{
  position: fixed;
  background: purple;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 100px;
  z-index:-10;
}

JavaScript

let options = {
  root: null,
  rootMargin: '0px',
  threshold: buildThresholdList()
}

let observer = new IntersectionObserver(callback, options);

function callback(entries, observer){
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
    if (entry.isIntersecting) {
    	console.log(entry.boundingClientRect);
    	document.querySelector('h3').innerHTML=entry.rootBounds;
    }
  });
}

let target = document.querySelector('.card');
observer.observe(target);


function buildThresholdList() {
  let thresholds = [];
  let numSteps = 3;

  for (let i=1.0; i<=numSteps; i++) {
    let ratio = i/numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
}