JSFiddle - React, Tailwind, and code Playground

HTML

<main id="main">
  <h2>
    100%/100% x-index:10
  </h2>
  Status: <span id="status">idle</span>
  
  <p>
    <button id="btn">Toggle</button>
  </p>
</main>
<footer id="footer">FOOTER: fixed / x-index: 1</footer>

CSS

body, html {
  height:100%;
  width:100%;
  overflow:hidden;
}
main {
  position:relative;
  padding:1em;
  display:block;
  width:100%;
  height:100vh;
  background-color:rgba(255,255,255,.9);
  z-index:10;
}
main.toggle {
  height:200px;
}

footer {
  padding:1em;
  width:100%;
  height:100px;
  background-color:red;
  position:fixed;
  bottom:0px;
  left:0px;
  z-index:1;
}

JavaScript

const onIntersection = (entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      document.getElementById('status').innerHTML = 'VISIBLE'
    }
  }
};

const observer = new IntersectionObserver(onIntersection);
observer.observe(document.querySelector('#footer'));
document.getElementById('btn').onclick=function() {
	document.getElementById('main').classList.toggle('toggle')
}