Javascript 确定具有类的节是否可见，jQuery

这是其他主题的一个变体，其思想是将

.js visible

分配给DOM中的任何元素，并且仅当该元素可见时才将

.visible

类分配给它

棘手的是，由于所有元素都使用相同的类名

.js visible

，我需要将类

.visible

仅分配给可见元素，而忽略具有相同类名的所有其他DOM元素。如果它是可见的，但不再可见，则删除类名

。可见的

<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>

有什么建议吗？
根据您的代码，此函数似乎可以工作。
您需要单独检查每个元素


$（窗口）。滚动（函数（）{
var wH=$（this）.height（），
wS=$（this.scrollTop（）；
$（'.js可见'）。每个（函数（）{
var hT=$（this）.offset（）.top，
hH=$（this.outerHeight（）；
如果（wS>=（hT+hH-wH）和&（hT>=wS）和&（wS+wH>=hT+hH））{
$（this.addClass（'visible'））
}否则{
$（this.removeClass（'visible'））
}
});
});
。可见{
背景：绿色；
}

.可见{
背景：绿色；
}
我是第一名
我是第二名
我是第三名
我是第四名
我想为需要相同解决方案的人发布一个解决方案的演示，您可以根据您的项目进行调整


$.fn.isInViewport=function（）{
var elementTop=$（this）.offset（）.top；
var elementBottom=elementTop+$（this.outerHeight（）；
var viewportTop=$（window.scrollTop（）；
var viewportBottom=viewportTop+$（window）.height（）；
返回elementBottom>viewportTop&&elementTop
。可见{
背景：绿色；
}

我是第一名
我是第二名
我是另外一个人
我是另外一个人
我是第三名
我是第四名
$(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')
        }
    });