El proyecto tiene el menú fijo con el logo svg blanco. Cuando el menú fijo sobre el menú de la sección negra debe permanecer en blanco, si está sobre la sección negra, el logotipo debe convertirse en negro. Probé muchas variantes para este objetivo. Pero todos ellos no funciona correctamente. También traté de usar la antigua biblioteca jQuery: verificación de antecedentes pero no funciona en absoluto. Aquí está la última variante que creé:

 $(window).scroll(function() { let headerLogo = $("#header_logo"); let overlaySection = $("#overlay-section"); let headerLogo_top = headerLogo.offset().top; let headerLogo_bottom = headerLogo_top + headerLogo.height(); let overlaySection_top = overlaySection.offset().top; let overlaySection_bottom = overlaySection_top + overlaySection.height(); let services = $("#services"); let services_top = services.offset().top; let services_bottom = services_top + services.height(); if (headerLogo_bottom >= overlaySection_top && headerLogo_top < overlaySection_bottom) { headerLogo.addClass('black_active') }else if(headerLogo_bottom >= services_top && headerLogo_top < services_bottom){ headerLogo.removeClass('black_active') } else{ headerLogo.removeClass('black_active') } });

Y casi funciona, pero no correctamente porque la clase cambió a temprana y el color del logotipo cambió de negro a blanco cuando no apunta al siguiente bloque negro. Tal vez haya una biblioteca jQuery antigua pero buena, por favor avíseme que necesito averiguar en este problema.