JSFiddle - React, Tailwind, and code Playground

HTML

<section></section>

<div id="someElement"></div>
	
<section></section>

CSS

body{
		margin: 0;
	}
	section{
		height: 100vh;
		width: 100vw;
	}	
	section:nth-of-type(1){
	  height: 100vh;
		background-color: red;
	}
	section:nth-of-type(2){
	  height: 200vh;
		background-color: blue;
	}
	#someElement{
		height: 20px;
		width: 100vh;
		background-color: gray;
	}

JavaScript

document.addEventListener('DOMContentLoaded', function(){
		var someElement = document.querySelector('#someElement');
	})
	window.onscroll = function(){
		//TOP
    if(someElement.getBoundingClientRect().top <= 0){
        console.log("TRIGGER: top of div reached.");
           alert('TRIGGER: top of div reached')
    }	
    //BOTTOM
		if(someElement.getBoundingClientRect().bottom <= 0){
			console.log("TRIGGER: bottom of div reached.");
      alert('TRIGGER: bottom of div reached');
		}
	}