Grow your CSS skills. Land your dream job.

Last updated on:

Detect First Visible Element of Certain Class

Adds a class of "first" to the first element that has a class of "activity" that is visible in the browser window.

$(window).scroll(function(){
	var scrollTop = $(window).scrollTop();
	var windowHeight = $(window).height();		
	var first = false;
	$(".activity").each( function() {
		var offset = $(this).offset();
		if (scrollTop <= offset.top && ($(this).height() + offset.top) < (scrollTop + windowHeight) && first == false) {
			$(this).addClass("first");
			first=true;
		} else {
			$(this).removeClass("first");
			first=false;
		}
	});
});

Comments

  1. Jeff
    Permalink to comment#

    This helped me out of a jam I was in for days, and completely solved my problem. Thanks so much, this is a fantastic site!

  2. Jacob Smith
    Permalink to comment#

    Unless I misunderstand, this requires that div’s bottom is higher than the bottom of the screen (that the element is completely visible). I personally would prefer that it require that the element is at all visible (top < screen bottom).

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".