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