滚动事件不会同时发生

如何解决滚动事件不会同时发生

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

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>