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。现在的任务是删除＆＃34; new＆＃34;每当此容器到达持有者容器的顶部时，从一个元素容器中分类。我已经尝试了几种使用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。

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

1 个答案: