[ad_1]
This is a variation of others topics, the idea is to assign a .js-visible to any element in the DOM, and only when it is visible assign to it a .visible class.
The tricky part is that as all of the elements are using the same class name .js-visible I need to assign the class .visible to only the visible element and ignore all the other DOM elements with the same class name. If it was visible and is not anymore then remove the class name .visible
<style>
.visible
background: green;
</style>
<div class="js-visible" style="height:800px">I am 1st</div>
<div class="js-visible" style="height:800px">I am 2nd</div>
<div class="js-visible" style="height:800px">I am 3rd</div>
<div class="js-visible" style="height:800px">I am 4th</div>
This is not working as desired
$(window).scroll(function()
var hT = $('.js-visible').offset().top,
hH = $('.js-visible').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH))
$('.js-visible').addClass('visible')
else
$('.js-visible').removeClass('visible')
);
Any suggestions?
[ad_2]
لینک منبع
