微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

滚动事件不会同时发生

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

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

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 举报,一经查实,本站将立刻删除。