jQuery check if element is visible on screen

Check if element is visible in viewport:

js:

$.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

		}

	}

});

html:

<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>



<h3 class="target">target element</h3>