如何在滾動到多個部分時切換類？

Question

我有我的網頁上幾個部分：

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

由於頭被固定在頂部，它的背景是透明的，而標題鏈接和標誌是白色的，我需要一種方法來一類.dark添加到標誌和標題鏈接，以便在具有白色背景顏色的部分在其下方滾動時在css中更改它們的顏色。具體而言，當部分。我們的產品，.references，。我們隊和。關於美，滾動類.dark應加標誌和標頭的鏈接，而應當時的部分。視頻被刪除的標題下， 。portfolio和footer在它下面滾動。

Answer 1

您可以在窗口或文檔，身體元素的當前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'); 
     } 
    }); 
}); 

此檢查，如果你是在白色部分這將是他們的頂部和底部（頂部+高）之間，並增加了黑色類並刪除它做的工作來自其他部分。