I am working with a HTML class that contains various elements. I want to add a new class to the first element when it reaches the top of those elements, and then continue adding the class to the subsequent elements as the page is scrolled. I've attempted the following code:
var element = $(".element");
$(window).scroll(function () {
var scroll = $(window).scrollTop();
for(var i = 0; i < element.length ; i++){
if(scroll > element.eq(i)){
element.eq(i).addClass("newClass");
}
})
Here's the HTML snippet:
<div>
<div class="element">
<img src="img/image1" />
</div>
<div class="element">
<img src="img/image2" />
</div>
<div class="element">
<img src="img/image3" />
</div>
</div>
However, the line
element.eq(i).addClass("newClass")