在容器中可见时从元素中删除css类

Question

I have the following html containers:

<div id="holder">
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
    <div class="element new">Content</div>
</div>

The holder container has a max-height of 300px. The element containers have an average height of 50px. The task is now to remove the "new" class from one element container at a time whenever this container hits the top of the holder container. I have tried several ways with javascript and jquery but none of them are working. Here is my current function

$(document).ready(function() {
    $('#holder').scroll(function() {
        var s = $(".element");
        s.each(function() {
            var pos = s.position();
            var windowpos = $('holder').scrollTop();
            if (windowpos >= pos.top & windowpos <=100) {
                s.removeClass("new");
            }
        });
    });
});

The problem is, that this will remove the class from all of the element containers. Is there a way to remove the class from only the element that hits the top of the holder container?

Answer 1

If I correctly understand your question, this should solve it:

$(document).ready(function() {
    $('#holder').scroll(function() {
        var s = $(".new");
        s.each(function(index, element) {
            var pos = $(element).position();
            var windowpos = $('#holder').scrollTop();
            if (windowpos >= pos.top & windowpos <=100) {
                $(s[0]).removeClass("new");
            }
        });
    });
});

Another problem was, you forgot the # before holder .