JSFiddle - React, Tailwind, and code Playground

by keif

HTML

<div class="h-156 w-full d1">Test One</div>
<div class="h-56 w-full d2">Test Two</div>

CSS

.h-56 {
    height: 14rem;
}
.h-156 {
    height: 214rem;
}

.w-full {
    width: 100%;
}

JavaScript

window.onscroll = (event) => {
	const scrollTop = $(window).scrollTop();
  const s1 = $('.d1').outerHeight();
  const s2 = $('.d2').outerHeight();
  if(
		scrollTop > s1 &&
    scrollTop < s2
  ) {
    $('.d1').css({'background':'red'});
  }
	console.log('d1', $('.d1'))
  console.log('scrolltop:', scrollTop)
  console.log('d1 outerheight:', s1)
  console.log('d1 outerheight 5/6:', s1 * 5/6)
	console.log('event:', event)

	if (scrollTop > (s1 * 5/6)) {
  	console.log("HIT ME")
    $('.d1').css({'background':'red'});
  }
 }