jQuery：在页面滚动时更改固定顶部导航栏的文本颜色

Question

我的个人网站需要帮助。 我想制作一个带有固定顶部导航栏（透明背景）的单页网站。 在页面的滚动中，菜单元素的颜色必须在具有深色背景的部分（它们具有“.dark-bg”类）上从黑色变为白色，并且在其他部分上返回白色。 所有部分都是100vh高度（当然除了菜单）。 这是网站的HTML主要结构：

<section class="section--menu fixed-header">                       
    <nav class="menu" id="navigation">
        <ul class="menu__list pull-md-right">
            <li class="menu__item menu__item--current">
                <a class="menu__link" data-target="intro-fabio">home</a>
            </li>                            
            <li class="menu__item">
                <a class="menu__link" data-target="about-fabio">about</a>
            </li>
            <li class="menu__item">
                <a class="menu__link" data-target="skills-fabio">skills</a>
            </li>
            <li class="menu__item">
                <a class="menu__link" data-target="works-fabio">works</a>
            </li>
            <li class="menu__item">
                <a class="menu__link" data-target="contacts-fabio">contacts</a>
            </li>                            
        </ul>
    </nav>
</section>

<!-- HOME
======================================================== -->
<section id="intro-fabio">       
</section>   

<!-- ABOUT
======================================================== -->
<section id="about-fabio" class="dark-bg">     
</section>

<!-- SKILLS
======================================================== -->
<section id="skills-fabio">     
</section>    

<!-- WORKS
======================================================== -->    
<section id="works-fabio" class="dark-bg">       
</section> 

<!-- CONTACTS
======================================================== -->    
<section id="contacts-fabio">       
</section> 

我写了这个jQuery脚本，但似乎只适用于带有“.dark-bg”类的最后一节。

$(document).ready(function() { 
    $(".dark-bg").each(function() {
        detectBg( $(this) );
    });

    function detectBg(sezione) { 
        $(window).scroll(function() {
            var finestra = $(window).scrollTop();
            var sezCurr = sezione.offset().top;
            var sezNext = sezione.next().offset().top;            

            if (finestra >= sezCurr && finestra < sezNext) {
                $('.menu__link').css("color", "#ebebeb");
            }
            else {
                $('.menu__link').css("color", "#1c1c1c");
            }
        });
    }
});

提前致谢！

Answer 1

您需要处理窗口的滚动事件，并在该处理程序中检查菜单下是否有任何暗部分，如果是，则更改菜单链接的颜色。 以下是更改所有链接颜色的示例，但可以轻松扩展为每个链接单独执行此操作：

 $(window).scroll(function() { var vpHeight = $(window).height(); var isBlack = false; $(".dark-bg").each(function(i, section) { if(isBlack) { return; } var offset = $(section).offset().top - $(window).scrollTop(); if(((offset + vpHeight) >= 0) && ((offset + vpHeight) <= vpHeight)) { isBlack = true; return; } }); $(".menu__link").css("color", isBlack ? "white" : "black"); }); 

 body { padding: 0; margin: 0; } ul { position:fixed; background: orange; padding: 0; margin: 0; list-style-type: none; } ul > li { float: left; padding: 0 4px; } section { background:red; height: 100vh; } .dark-bg { background: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu__list pull-md-right"> <li class="menu__item menu__item--current"> <a class="menu__link" data-target="intro-fabio">home</a> </li> <li class="menu__item"> <a class="menu__link" data-target="about-fabio">about</a> </li> <li class="menu__item"> <a class="menu__link" data-target="skills-fabio">skills</a> </li> <li class="menu__item"> <a class="menu__link" data-target="works-fabio">works</a> </li> <li class="menu__item"> <a class="menu__link" data-target="contacts-fabio">contacts</a> </li> </ul> <!-- HOME ======================================================== --> <section id="intro-fabio"> </section> <!-- ABOUT ======================================================== --> <section id="about-fabio" class="dark-bg"> </section> <!-- SKILLS ======================================================== --> <section id="skills-fabio"> </section> <!-- WORKS ======================================================== --> <section id="works-fabio" class="dark-bg"> </section> <!-- CONTACTS ======================================================== --> <section id="contacts-fabio"> </section>