Question

这是其他主题的变体，其目的是为DOM中的任何元素分配.js-visible，并且只有在它可见时才为其分配.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')
        }
    });

有什么建议吗？

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

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

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

2 个答案: