Question

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

first
second
third

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

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

提前致谢！

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>

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

1 个答案: