javascript - Removing css class from element when visible in container -
i have 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 max-height of 300px. element containers have average height of 50px. task remove "new" class 1 element container @ time whenever container hits top of holder container. have tried several ways javascript , jquery none of them working. here 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, remove class of element containers. there way remove class element hits top of holder container?
if correctly understand question, 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, forgot #
before holder
.
wiki
Comments
Post a Comment