複数のセクションにスクロールするときにクラスを切り替える方法は？

Question

私は自分のページ上のいくつかのセクションがあります：

ヘッダが先頭に固定されており、その背景には、ヘッダーのリンクとロゴが白であるが、私はロゴにクラス.darkを追加する方法を必要とする、透明なので

<header> 
    <a href="#" class="logo"><img src="img/logo.png"></a> 
    ...other links go here 
</header> 
<section class="video"> 
</section> 
<section class="our-products"> 
</section> 
<section class="portfolio"> 
</section> 
<section class="references"> 
</section> 
<section class="our-team"> 
</section> 
<section class="about-us"> 
</section> 
<footer></footer> 

白い背景色のセクションがそれらの下にスクロールすると、CSSの色を変更するためのヘッダーリンクが含まれています。具体的には、セクション.our-products、.references、.our-team、および.ab-usがヘッダーの下にスクロールすると、class .darkをロゴとヘッダーのリンクに追加する必要があります。セクション.video、 .portfolioとその下のフッタースクロール。

Answer 1

body要素の現在のscrollTopを問題のセクションの位置と比較するウィンドウまたはドキュメントでスクロールイベントハンドラを使用できます。選択を簡単にするため、これらのセクションに共通のクラスを与えることをお勧めします（私のデモで"white"を使用しました）。

これはかなり荒いですが、それはあなたのための出発点である：

var whiteSections = $("section.white") 
 
var header = $("header") 
 

 
$(window).on("scroll", function(e) { 
 
    var scrollTop = document.body.scrollTop + 20 
 
    var dark = false 
 
    whiteSections.each(function() { 
 
    var $this = $(this) 
 
    var top = $this.offset().top 
 
    if (top <= scrollTop && top + $this.height() >= scrollTop) { 
 
     dark = true 
 
     return false 
 
    } 
 
    }) 
 
    header.toggleClass("dark", dark) 
 
})

body { background-color: grey; } 
 
header { position: fixed; color: white; } 
 
header.dark { color: black; } 
 
footer { padding-top: 500px; } 
 
section { min-height: 50px; } 
 
.white { background-color: white; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header> 
 
    <a href="#" class="logo"><img src="img/logo.png"></a> 
 
    ...other links go here 
 
</header> 
 
<section class="video"> 
 
The video section. The video section. The video section. The video section. 
 
</section> 
 
<section class="our-products white"> 
 
Products. Products. Products. Products. Products. Products. 
 
</section> 
 
<section class="portfolio"> 
 
Portfolio. Portfolio. Portfolio. Portfolio. Portfolio. 
 
</section> 
 
<section class="references white"> 
 
References. References. References. References. References. References. 
 
</section> 
 
<section class="our-team white"> 
 
Team. Our team. The team. 
 
</section> 
 
<section class="about-us white"> 
 
We're just a company, with a website, trying to help you out. Thanks for reading. 
 
</section> 
 
<footer> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis varius quam, in interdum massa finibus nec</p> 
 
</footer>

Answer 2

私はあなたが彼らの上部と底部との間になる白いセクション（トップ+高さ）であり、暗いクラスを追加し、それを削除した場合、これはあなた

$(function(){ 
    $(document).scroll(function(){ 
     if($(this).scrollTop() >= $('.our-products').offset().top && $(this).scrollTop() <= $('.our-products').offset().top+$('.our-products').outerHeight() || $(this).scrollTop() >= $('.references').offset().top && $(this).scrollTop() <= $('.references').offset().top+$('.references').outerHeight() || $(this).scrollTop() >= $('.our-team').offset().top && $(this).scrollTop() <= $('.our-team').offset().top+$('.our-team').outerHeight()|| $(this).scrollTop() >= $('.about-us').offset().top && $(this).scrollTop() <= $('.about-us').offset().top+$('.about-us').outerHeight() { 
      $(".logo").addClass('dark'); 
     } 
     else{ 
      $(".logo").removeClass('dark'); 
     } 
    }); 
}); 

ため、このチェックを仕事をする必要がありますね他のセクションから。