JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    scroll down to see the div
</div>
<div id="tester"></div>

CSS

body, html {
    height: 100%;
}

#wrapper {
    height: 400%;
    background: none repeat scroll 0 0 #f99ccc ;
    text-align:center;
    padding-top:20px;
    font-size:22px;
}

#tester {
    padding-top:1200px;    
    height: 600px;
    background: none repeat scroll 0 0 #fff;
    border: 5px solid black;
}

JavaScript

$(window).on('scroll',function() {
    if (checkVisible($('#tester'))) {
        alert("Visible!!!");
        $(window).off('scroll');
    } else {
        // do nothing
    }
});

function checkVisible( elm, eval ) {
    eval = eval || "object visible";
    var viewportHeight = $(window).height(), // Viewport Height
        scrolltop = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();   
    
    if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
    if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}