在容器中可見時從元素中刪除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>

支架容器的最大高度為300px。 元素容器的平均高度為50px。 現在的任務是每當這個容器碰到持有者容器的頂部時，從一個元素容器中刪除“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");
            }
        });
    });
});

問題是，這將從所有元素容器中刪除該類。 有沒有辦法只從撞擊持有者容器頂部的元素中刪除該類？

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 。