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. User Avatar
    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. User Avatar
    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).

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag