Entonces, tengo algunos elementos de navegación que están en una posición fija. Necesito cambiar su color según el color de fondo del contenedor a continuación mientras me desplazo. No estoy buscando una solución CSS/modo mixto ya que el contexto es complejo, sino que necesito cada elemento para detectar el contenedor/div de fondo oscuro a continuación en el desplazamiento y cambiar su color en función de eso. Más como aplicar y eliminar una clase...
$(window).scroll(function(){ var light_pos = $('div:nth-child(even)').offset().top; var light_height = $('div:nth-child(even)').height(); var menu_pos = $('.link1').offset().top; var menu_height = $('.link1').height(); var scroll = $(window).scrollTop(); if(menu_pos > light_pos && menu_pos < (light_pos + light_height)) { $('.link1').addClass('menu_black'); $('.link1').removeClass('menu_white'); } else { $('.link1').removeClass('menu_black'); $('.link1').addClass('menu_white'); } }) span {position:fixed; padding: 50px; font-size:26px; color:#202020;} .link1 {top:50px; left:0;} .link2 {top:0; right:0;} .link3 {bottom:0; left:0;} .link4 {bottom:50px; right:0;} .bg {text-align:center; height:100vh;} .bg:nth-child(even) {background-color:black; color:white;} .menu_white {color: #000;} .menu_black {color: #fff;} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="link1">Top left</span> <span class="link2">Top right</span> <span class="link3">Bottom left</span> <span class="link4">Bottom right</span> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div>Esta sería una estructura básica. Tenga en cuenta que apliqué un borde verde para mostrar los límites de sus elementos de tramo. Dado que tienen un relleno de 50 px, debe agregarlo al llamar a offset (), porque el desplazamiento calcula la posición, incluido el relleno.
También es mucho más fácil usar clases para sus elementos bg, de lo contrario, debe comparar el valor del color, y eso puede ser una molestia porque los navegadores manejan el color de manera diferente.
$(function() { // this applies bg color to your bg elements, instead of css. let bgs = $('div.bg'); bgs.each(function(index, el) { let isEven = (index % 2 == 0); if (isEven) { $(el).addClass('black'); } else { $(el).addClass('white'); } }) }); $(window).on('scroll', function(e) { let texts = $('span.link'); let bgs = $('div.bg'); // nested because each span has different bounds. for (let span of texts) { let span_offset = $(span).offset().top+50; for (let bg of bgs) { let offset = $(bg).offset().top; if (offset >= span_offset && offset <= span_offset + $(bg).outerHeight()) { let isBlack = $(bg).hasClass('black'); let clr = isBlack ? 'black' : 'white'; $(span).css('color', clr); } } } }); span {position:fixed; padding: 50px; font-size:26px; color:#202020; border: 1px solid green;} .link1 {top:50px; left:0;} .link2 {top:0; right:0;} .link3 {bottom:0; left:0;} .link4 {bottom:50px; right:0;} .bg {text-align:center; height:100vh;} .bg.black {background-color:black; color:white;} .bg.white {background-color:white; color:black;} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="link link1">Top left</span> <span class="link link2">Top right</span> <span class="link link3">Bottom left</span> <span class="link link4">Bottom right</span> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div>