javascript - 如果背景颜色相同，则在滚动时更改徽标颜色

Question

我的项目（在 Wordpress/elementor 中）有许多 .slide 部分，它们有 100vh 和 100vw。它还有一个固定的标题，带有 svg #logoken 悬停在页面顶部。

向下滚动时，ID 为 #logoken 的 svg 徽标必须更改颜色，如 .slide 数据属性 data-logo 中所确定的那样

我编写了以下代码并且颜色发生了变化，但只有一秒钟并且在向上滚动时，它不起作用。我相信这与我对幻灯片位置的检查有关，但我不知道如何。

jQuery(document).ready(function( $ ) {

    //Scroll action for logo & menu colors
            
    $( window ).scroll( function(e) {
        $('.slide').each( function(){
            var theSlide = this;
            var top_of_element = $(theSlide).offset().top;
            var bottom_of_element = $(theSlide).offset().top + $(theSlide).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
            var top_of_screen = $(window).scrollTop();
            
            if( (top_of_element >= top_of_screen) && (top_of_element < (top_of_screen + $(theSlide).height())) ) {
            
                if ( $(theSlide).data('logo') == 'black'){
                    if(!$("#logoken").hasClass("black")){
                        $("#logoken").addClass("black");
                    }
                } 
                else{
                     if($("#logoken").hasClass("black")){
                        $("#logoken").removeClass("black");
                    }
                }
                console.log ($(this).attr('id') +" is on top: and logocolor is" + $(theSlide).data('logo'));
            }
        });
    });
    
    
});

这是临时链接：http ://castaar.ws.webwow.be你可以在其中看到我的代码...

标签： javascriptjqueryscroll