Verifica se um elemento está totalmente visível na tela (jQuery)

Box 1

Box 2

Box 3

Box 4

jQuery(document).ready(function($){ function vPos(divID){ var tDiv = $(divID).offset().top; var hDiv = $(divID).height(); var tWin = $(window).scrollTop(); var hWin = window.innerHeight; var vPos = "Topo Div:"+tDiv+ "<br>Altura Div:"+hDiv+ "<br>Topo Janela:"+tWin+ "<br>Altura Janela:"+hWin; $(divID).html(vPos); if(tDiv >= tWin && (tDiv+hDiv) < (tWin + hWin)){ var vMens = "<br>Totalmente visível"; $(divID).html(vPos+vMens); }else if(tDiv >= tWin && (tDiv+hDiv) > (tWin + hWin)){ var vMens = "<br>Parcialmente visível - corte abaixo"; $(divID).html(vPos+vMens); }else if(tDiv < tWin && (tDiv+hDiv) < (tWin + hWin)){ var vMens = "<br>Parcialmente visível - corte acima"; $(divID).html(vPos+vMens); } } $( window ).scroll(function() { $(".v-offset").each(function(){ var divID = "#"+$(this).attr('id'); vPos(divID); }); }); });

<div class="card card mb-3"> <div class="card-header"> <h4>Verifica se um elemento está totalmente visível na tela (jQuery)</h4> </div> <div class="card-body"> <div id="box-1" class="v-offset"><h4>Box 1</h4></div> <div id="box-2" class="v-offset"><h4>Box 2</h4></div> <div id="box-3" class="v-offset"><h4>Box 3</h4></div> <div id="box-4" class="v-offset"><h4>Box 4</h4></div> </div> </div>

#box-1{ width: 100%; height: 300px; background: #F9797B; color: #000; } #box-2{ width: 100%; height: 200px; background: #AA79F9; color: #000; } #box-3{ width: 100%; height: 400px; background: #F9EC79; color: #000; } #box-4{ width: 100%; height: 300px; background: #187605; color: #FFF; }