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

Question

我有以下 html 容器:

<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>

holder 容器的最大高度为 300 像素。元素容器的平均高度为 50px。 现在的任务是，每当该容器碰到 holder 容器的顶部时，一次从一个元素容器中删除"new"类。 我已经尝试了几种使用 javascript 和 jquery 的方法，但都没有用。 这是我当前的功能

$(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");
            }
        });
    });
});

问题是，这将从所有元素容器中删除该类。有没有一种方法可以只从到达 holder 容器顶部的元素中删除类？

Answer 1

如果我正确理解你的问题，这应该可以解决:

$(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");
            }
        });
    });
});

另一个问题是，您忘记了 holder 之前的 #。