在元素上方滚动 100 像素时向元素添加类

Question

当每个元素（abc 类）到达视口顶部下方 100 像素时，我正在尝试为它添加一个类。但是我无法将类添加到每个单独的元素中。而是将类添加到所有 div。有什么建议吗？

$(function() {
  $(document).scroll(function() {
    if ($(this).scrollTop() >= $('.abc').offset().top - 100) {
      $(".abc").addClass("color");
    } else {
      $(".abc").removeClass("color");
    }
  });
});

#header {
  height: 150px;
}

.abc {
  background-color: orange;
}

.color {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <h1>Header</h1>
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>

Answer 1

您的逻辑对于检查单个元素是正确的，但是要为集合实现这一点，您需要遍历每个元素并单独评估它们的位置。像这样的：

$(function() {
  $(document).scroll(function() {
    var scrollTop = $(this).scrollTop();
    
    $('.abc').each(function() {
      $(this).toggleClass('color', scrollTop >= $(this).offset().top - 100);
    });
  });
});

#header { height: 150px; }
.abc { background-color: orange; }
.color { background-color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <h1>Header</h1>
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
  vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
  Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>

Answer 2

让我们试试这样的。

 $('.abc').each(function(){ //For each .abc
   if($(window).scrollTop() >= $(this).offset().top - 100) { //see if is in offset
      $('.abc').removeClass("color"); //remove all colors
      $(this).addClass("color"); //set the offset .abc with color
   } 
 })

如果可行，请告诉我...请参阅此示例。 https://jsfiddle.net/056vzoa2/5/
问候！