如何在最后一个目标时更改元素 class 并停留在其他元素上？

Question

该项目有带有白色 svg 徽标的粘性菜单。当黑色部分菜单上的粘性菜单应保持白色时，如果黑色部分上的徽标应转换为黑色。为了这个目标，我尝试了很多变体。但所有这些都无法正常工作。我还尝试使用旧的 jQuery library: background-check 但它根本不起作用。这是我创建的最后一个变体：

$(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')
        }

    });

它几乎可以工作，但不正确，因为 class 更改为早期，并且当它不针对下一个黑色块时，徽标颜色从黑色变为白色。可能有一些老的但不错的作品jQuery图书馆请指教我需要在这个问题上弄清楚

Answer 1

您尝试过以下方法而不是 addClass 和 removeClass 吗？

headerLogo.classList.toggle('black_active');

出于某种原因，我也总是被其他两个卡住，但这似乎总是有效。

如何在最后一个目标时更改元素 class 并停留在其他元素上？

How to change the element class when the last one targets, and stays over other element?

javascript

jquery