Title

jQuery Detect if element is in viewport

description

The long awaited trigger

Published 2022-10-06

Modified 2023-08-01

content

				
					jQuery(function($){
	// FUNCTION CHECK IF IS IN VIEWPORT ELEMENTS
	function trigger_element_inview() {
		if ($('#element1').isInViewport()) {
        	$('#element1').addClass('inview');
    	} else {
        	$('#element1').removeClass('inview');
    	}
		if ($('#element2').isInViewport()) {
        	$('#element2').addClass('inview');
    	} else {
        	$('#element2').removeClass('inview');
        }
	}

	// FUNCTION CHECK IF IS IN VIEWPORT OVERARCHING
	$.fn.isInViewport = function() {
    	var elementTop = $(this).offset().top;
    	var elementBottom = elementTop + $(this).outerHeight();
		var viewportTop = $(window).scrollTop();
    	var viewportBottom = viewportTop + $(window).height();
		return elementBottom > viewportTop && elementTop < viewportBottom;
	};
	//FIRE FUNCTIONS ON LOAD, RESIZE AND SCROLL
	$(window).on('scroll resize', trigger_element_inview);
	$(document).ready(trigger_element_inview);
});