javascript - 一页网站更改菜单颜色每个部分

Question

我目前正在构建一个带有固定导航菜单(蓝色背景)的单页网站。这个单页网站有 4 个部分，2 个蓝色背景和 2 个白色背景。

我对这个菜单的想法是，当我在蓝色部分上滚动(不是鼠标悬停)时，菜单背景变为白色。当我滚动到白色部分时，背景变回蓝色。 可以找到一个例子here .

(不是我的网站，但在滚动时查看菜单颜色的变化)

我的 HTML 代码如下所示:

<div class="subMenu" >
    <div class="inner">
        <a href="#sTop" class="subNavBtn">Home</a>
        <a href="#s1" class="subNavBtn">Over mij</a> 
        <a href="#s2" class="subNavBtn">Kennis</a>
        <a href="#s3" class="subNavBtn">Projecten</a>
        <a href="#s4" class="subNavBtn">Contact</a>
    </div>
</div>

<div class="section s1">
    <div class="inner">
        <h1>Section 1</h1>
    </div>
</div>

<div class="section s2">
    <div class="inner">
        <h1>Section 2</h1>
    </div>
</div>
<div class="section s3">
    <div class="inner">
        <h1>Section 3</h1>
    </div>
</div>

<div class="section s4">
    <div class="inner">
        <h1>Section 4</h1>
    </div>
</div>

有没有简单的方法来做到这一点？ 提前致谢。

Answer 1

我已经为我的问题找到/创建了一个临时修复程序。

$(window).scroll(function(e) {
var s1 = $('.s1'),
    s2 = $('.s2'),
    s3 = $('.s3'),
    s4 = $('.s4'),
    menu = $('.menu'),
    diff = s1[0].offsetTop - window.pageYOffset;
    diff2 = s2[0].offsetTop - window.pageYOffset; 
    diff3 = s3[0].offsetTop - window.pageYOffset; 
    diff4 = s4[0].offsetTop - window.pageYOffset; 

    if(diff < 100) {
        $(".menu").addClass("white");
        $(".menu").removeClass("blue");
    }
    if(diff2 < 100) {
        $(".menu").addClass("blue");
        $(".menu").removeClass("white");
    }
    if(diff3 < 100) {
        $(".menu").addClass("white");
        $(".menu").removeClass("blue");
    }
    if(diff4 < 100) {
        $(".menu").addClass("blue");
        $(".menu").removeClass("white");
    }
    if(diff > 100) {
        $(".menu").removeClass("white");
        $(".menu").removeClass("blue");
    }

});

JSFIDDLE DEMO