Javascript 如果背景颜色相同，则更改滚动条上的徽标颜色
我的项目（在Wordpress/elementor中）有许多.slide部分，有100vh和100vw。 它还有一个固定的页眉，页面顶部悬停着一个svg#logoken 向下滚动时，id为#logoken的svg徽标必须根据.slide data属性data logo中确定的颜色进行更改 我编写了下面的代码，颜色发生了变化，但只有一秒钟，在向上滚动时，它不起作用。我相信这与我检查滑动位置有关，但我不知道怎么做Javascript 如果背景颜色相同，则更改滚动条上的徽标颜色,javascript,jquery,scroll,Javascript,Jquery,Scroll,我的项目（在Wordpress/elementor中）有许多.slide部分，有100vh和100vw。 它还有一个固定的页眉，页面顶部悬停着一个svg#logoken 向下滚动时，id为#logoken的svg徽标必须根据.slide data属性data logo中确定的颜色进行更改 我编写了下面的代码，颜色发生了变化，但只有一秒钟，在向上滚动时，它不起作用。我相信这与我检查滑动位置有关，但我不知道怎么做 jQuery(document).ready(function( $ ) {
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'));
}
});
});
});
jQuery（文档）.ready（函数（$）{
//图标和菜单颜色的滚动动作
$（窗口）。滚动（功能（e）{
$（'.slide'）。每个（函数（）{
var theSlide=这个；
var top\u of_元素=$（theSlide）.offset（）.top；
变量bottom\u of_元素=$（theSlide.offset（）.top+$（theSlide.outerHeight（）；
var bottom\u of_screen=$（窗口）.scrollTop（）+$（窗口）.innerHeight（）；
var top\u of_screen=$（window.scrollTop（）；
如果（（元素的顶部>=屏幕的顶部）&&（元素的顶部<（屏幕的顶部+$（滑块）.height（）））{
if（$（theSlide.data（'logo'）=='black'））{
if（！$（“#logoken”）.hasClass（“黑色”））{
$（“#logoken”）.addClass（“黑色”）；
}
}
否则{
if（$（“#logoken”）.hasClass（“黑色”））{
$（“#logoken”）.removeClass（“黑色”）；
}
}
console.log（$（this）.attr（'id'）+”位于顶部：logocolor是“+$（theSlide.data（'logo'））；
}
});
});
});