JSFiddle - React, Tailwind, and code Playground

HTML

<div id="elements"></div>
<div id="ror" style="padding: 20px">ror</div>

JavaScript

// just create some dummy elements to put ror div at the end
for(var i = 0; i < 100; i++) {
    $('#elements').append('<p>test</p>');
}
/** 
If you are not using timeout in scroll callback, any heavy time consuming code execution will slow down scrolling the page. timeout ensures to run scroll callback code after a certain period which improves page scroll performance
*/
var timeout = null;
$(window).scroll(function (event) {
		// uncomment the for loop to see slow performance in scrolling the page. 
    // This code is outside timeout callback. You can later cut/paste this
    // code inside timeout callback to see the improvement in scrolling the
    // page. 
    /*for(var i = 0; i < 10000; i++) {
        console.log('avc');
    }*/
    if (!timeout) {
    		// set a timeout to run after 250ms
        timeout = setTimeout(function () {
            clearTimeout(timeout);
            timeout = null;
            var eT = $('#ror').offset().top,
            wH = $(this).height(),
            wSt = $(this).scrollTop();
            if (wSt > (eT-wH)){
              alert('you have scrolled to the ror!');
              //detach scroll event handler, as we dont want it to fire again
              $(this).off(event);
            }
        }, 250);
    }
});