JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="fixed"></div>

<div class="layer dark"></div>
<div class="layer"></div>
<div class="layer dark"></div>
<div class="layer"></div>
<div class="layer dark"></div>
<div class="layer"></div>
<div class="layer dark"></div>
<div class="layer"></div>

SCSS

* {margin: 0}

.fixed {
	background: #000;
	height: 1rem;
	left: 1rem;
	position: fixed;
	top: 1rem;
	width: 1rem;
}

.layer {
	height: 80vh;
	width: 100%;
	&.dark {
		background: red;
	}
}

JavaScript

const darkLayers = document.querySelectorAll('.layer')

const config = {
  rootMargin: '-16x 0px 0px -90%',
}

darkLayerObserver = new IntersectionObserver((entries, observer) => {
	entries.forEach(entry => {
    if (entry.intersectionRatio === 0) {
      console.log('out')
		}
	})
}, config)

darkLayers.forEach(layer => {
  darkLayerObserver.observe(layer)
})