Actualmente estoy trabajando en un proyecto en el que el color del logotipo debería cambiar según el color de fondo. Preferiría hacer esto con clases de CSS.
Desafortunadamente, el problema es: tan pronto como se desplaza el primer DIV de la clase "bg02", la clase también cambia para el logotipo, pero tan pronto como se desplazan los siguientes divs "bg02", ya no sucede nada. ¿Qué estoy haciendo mal? ¿Me puedes ayudar?
Aquí está mi código:
JavaScript
$(document).on("scroll", function() { var scrollPos = $(document).scrollTop(); $('#logo').each(function() { var currDiv = $(this); var refElement = $('.bg02'); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#logo').removeClass("inverted"); currDiv.addClass("inverted"); } else { currDiv.removeClass("inverted"); } }); });CSS
#logo { position: fixed; top: 20px; left: 5%; z-index: 100; font-size: 26px; font-weight: 700; color: #000; } #logo.inverted { color: #fff; } .bg01, .bg02 { position: relative; width: 100%; height: 600px; } .bg01 { background: #fff; } .bg02 { background: #000; }HTML
<div id="logo">Logo</div> <div class="bg01"></div> <div class="bg02"></div> <div class="bg01"></div> <div class="bg02"></div> <div class="bg01"></div> <div class="bg02"></div>Su problema es que $('.bg02').position() solo puede devolver una sola posición, por lo que devuelve la posición de la primera.
Para usar su método de verificar scrollTop (), necesita hacer un bucle .bg02 no #logo
Un par de pequeños cambios en su código:
Bucle .bg02 :
$('.bg02').each(function() { var refElement = $(this); y un "descanso" dentro del if - return false para detener la continuación del ciclo y eliminar la clase invertida para el .bg02 posterior que no coincide
if (positioncheck) { $("#logo").addClass("inverted"); return false; }También puede "modificar" cuando el logotipo se invierte considerando su posición, por ejemplo:
var scrollPos = $(document).scrollTop() + $("#logo").position().top + ($("#logo").height() / 2)tal como estaba, solo se invertiría cuando bg02 llegara a la cima.
Fragmento actualizado:
$(document).on("scroll", function() { var scrollPos = $(document).scrollTop() + $("#logo").position().top + ($("#logo").height() / 2) $('.bg02').each(function() { var refElement = $(this); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('#logo').addClass("inverted"); // found one, so exit .each return false; } else { $('#logo').removeClass("inverted"); } }); }); #logo { position: fixed; top: 20px; left: 5%; z-index: 100; font-size: 26px; font-weight: 700; color: #000; } #logo.inverted { color: #fff; } .bg01, .bg02 { position: relative; width: 100%; height: 200px; } .bg01 { background: #fff; } .bg02 { background: #000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="logo">Logo</div> <div class="bg01"></div> <div class="bg02"></div> <div class="bg01"></div> <div class="bg02"></div> <div class="bg01"></div> <div class="bg02"></div>