<!-- JQUERY -->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body, html {
height: 100%;
}
#wrapper {
height: 400%;
background: none repeat scroll 0 0 #eee;
text-align:center;
padding-top:20px;
}
#tester {
padding-top:1200px;
height: 600px;
background: none repeat scroll 0 0 #000;
}
</style>
</head>
<body>
<div id="wrapper">
scroll down to see the div
</div>
<div id="tester"></div>
<script>
var isVisible = false;
$(window).on('scroll',function() {
if (checkVisible($('#tester'))&&!isVisible) {
alert("Visible!!!");
isVisible=true;
}
});
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)));
}
</script>
</body>
</html>