Removing css class from element when visible in container

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?

By the top you mean at first child of holder element? Or visually its at the top of the page? — Frankusky
– Frankusky, Commented Aug 22, 2017 at 1:02

Nano Miratus · Accepted Answer · 2017-08-22 01:10:28Z

3

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.

answered Aug 22, 2017 at 1:10

Nano Miratus

4754 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Removing css class from element when visible in container

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related