滚动事件不会同时发生

编程问答 2022-05-04

问题描述

我有一个导航栏和一个标志，滚动时它们都变成白色。唯一的问题是徽标在导航栏选项之前稍微改变了颜色。为什么会这样，我该如何解决？

let logo = document.querySelector('.site-nav');
let image = document.querySelector('.logo-contain');

let logo0 = logo.getElementsByTagName('a')[0];
let logo1 = logo.getElementsByTagName('a')[1];
let logo2 = logo.getElementsByTagName('a')[2];

window.addEventListener("scroll",(e) => {

  console.log(logo)
  console.log(image)

  let scrolled = document.scrollingElement.scrollTop;

  if(scrolled > 1){
    logo0.classList.add(
      'on-scroll');
    logo1.classList.add(
      'on-scroll');
    logo2.classList.add(
      'on-scroll');
    }else {
   logo0.classList.remove(
      'on-scroll');
    logo1.classList.remove(
      'on-scroll');
    logo2.classList.remove(
      'on-scroll');
    }
});

<style>
 .on-scroll {
  
    color: white !important;
  }
  .logo-change {
     filter: invert(100);
  }
</style>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptonscrollonscrolllistenershopify