Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<style>
.largebox {
height: 1500px;
}
.box {
height: 400px;
}
</style>
</head>
<body>
<div class="largebox">
<div id="msg" style="position:fixed;left:30%;"></div>
<div class="box">First box</div>
<div id="box1" class="box1">Second box</div>
</div>
<script>
function isVisible($el) {
let docViewTop = $(window).scrollTop();
let docViewBottom = docViewTop + $(window).height();
let elTop = $el.offset().top;
let elBottom = elTop + $el.height();
return((elBottom <= docViewBottom) && (elTop >= docViewTop));
}
$(function() {
$("#msg").text("#Second box visible=" + isVisible($("#box1")));
$(window).scroll(function() {
$("#msg").text("Second box visible=" + isVisible($("#box1")));
});
});
</script>
</body>