$.fn.is_on_screen = function(){ var win = $(window); var viewport = { top : win.scrollTop(), left : win.scrollLeft() }; viewport.right = viewport.left + win.width(); viewport.bottom = viewport.top + win.height(); var bounds = this.offset(); bounds.right = bounds.left + this.outerWidth(); bounds.bottom = bounds.top + this.outerHeight(); return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); }; if( $('.target').length > 0 ) { // if target element exists in DOM if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info } else { $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info } } $(window).scroll(function(){ // bind window scroll event if( $('.target').length > 0 ) { // if target element exists in DOM if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded $('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info } else { $('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info } } });
<div class="log">log</div> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> <h3 class="target">target element</h3> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br> scroll to target element<br>
.log { position: fixed; right: 20px; top: 20px; }