判断一个带有类的部分是否可见，jQuery答案

【问题标题】：Determine whether a section with class is visible or not, jQuery判断一个带有类的部分是否可见，jQuery
【发布时间】：2017-11-02 22:37:49
【问题描述】：

这是其他主题的变体，其想法是将.js-visible 分配给DOM 中的任何元素，并且仅在可见时为其分配.visible 类。

棘手的部分是，由于所有元素都使用相同的类名.js-visible，我需要将类.visible 分配给仅可见元素并忽略具有相同类名的所有其他DOM 元素。如果它是可见的并且不再存在，则删除类名 .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>

这没有按预期工作

$(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')
        }
    });

有什么建议吗？

【问题讨论】：

标签： javascript jquery html css frontend

【解决方案1】：

根据您的代码，此功能似乎有效。您需要单独检查每个元素。

$(window).scroll(function() {
    var wH = $(this).height(),
        wS = $(this).scrollTop();
    $('.js-visible').each(function() {
        var hT = $(this).offset().top,
            hH = $(this).outerHeight();
            
        if (wS >= (hT+hH-wH) && (hT >= wS) && (wS+wH >= hT+hH)){
                $(this).addClass('visible')
            } else {
                $(this).removeClass('visible')
            }
        });
    });

    .visible {
       background: green;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
    .visible {
       background: green;
    }
</style>

<div class="js-visible" style="height:200px">I am 1st</div>
<div class="js-visible" style="height:200px">I am 2nd</div>
<div class="js-visible" style="height:200px">I am 3rd</div>
<div class="js-visible" style="height:200px">I am 4th</div>

【讨论】：

【解决方案2】：

我想发布一个解决方案的演示，供需要相同解决方案的人使用，您可以适应您的项目

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('resize scroll', function() {
  $('.js-visible').each(function() {
  
      var activeColor = $(this).attr('id');
    if ($(this).isInViewport()) {
      $(this).addClass('visible');
    } else {
      $(this).removeClass('visible');
    }
  });
});

    .visible {
       background: green;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="js-visible" style="height:800px">I am 1st</div>
<div class="js-visible" style="height:800px">I am 2nd</div>
<div class="" style="height:800px">I am something else</div>
<div class="" style="height:800px">I am something else</div>
<div class="js-visible" style="height:800px">I am 3rd</div>
<div class="js-visible" style="height:800px">I am 4th</div>

【讨论】：