上に100pxをスクロールするときに要素にクラスを追加

Question

ビューポートの一番上の100pxに達すると、各要素（クラスabc）にクラスを追加しようとしています。しかし、個々の要素にクラスを追加することはできません。むしろすべての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/
よろしく！