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() { 
 
\t var vpHeight = $(window).height(); 
 
     var isBlack = false; 
 
     $(".dark-bg").each(function(i, section) { 
 
      if(isBlack) { 
 
    \t   return; 
 
      } 
 
    \t 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>