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

Posted 2023-05-08

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

【英文标题】：jQuery: change text color of a fixed top navbar at the scrolling of the page

【发布时间】：2016-08-31 05:18:59

【问题描述】：

我的个人网站需要帮助。我想制作一个带有固定顶部导航栏（透明背景）的单页网站。在页面滚动时，菜单元素的颜色必须在具有深色背景的部分（它们具有“.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");
            
        );
    
);

提前致谢！

【问题讨论】：

它只适用于.dark-bg，因为这是唯一一个由$(".dark-bg").each(function() detectBg( $(this) ); );调用的类

如果一切都固定好了（高度），使用 body 元素上的 jQuery scrollTop() 来确定滚动的位置并点亮正确的菜单...

这也可以帮助你：codepen我在这里找到了它：Viewport Height for Full Screen Div?

【参考方案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>

【讨论】：

感谢 xxxmatko 提供的解决方案！最后一节只有一点问题。对于我的网站，我对第二个 if 语句进行了修改： var posSez = $(section).offset().top; var posWin = $(window).scrollTop(); if( ( posWin >= posSez ) && ( posWin