Vanilla Javascript 在移动视图中更改图像

Question

在移动设备中如何将徽标更改为白色？ 但是我已经有了下面的滚动代码，我正在使用香草 javascript。 我有深色和浅色的标志。 它在滚动时工作但不知道如何为宽度移动添加脚本

 addEventListener('scroll', (event) => { });

onscroll = (event) => {
 
  const logoDark = document.querySelector('.nav-logo');
  const logoLight = document.querySelector('.nav-logo-light');

  logoDark.classList.add("show");
  logoLight.classList.add("hide");


  if (window.scrollY > 100) {
    logoDark.classList.add("hide");
    logoLight.classList.add("show");

    for (let i = 0; i < navItems.length; i++) {
      navItems[i].classList.add('light-text');
    }
  }

  else if (window.scrollY < 100) {
    logoDark.classList.remove('hide');
    logoLight.classList.remove("show");
  }
};

Answer 1

您可以在 javascript 中使用media-query ，也可以在 CSS 中使用

这是一个片段：

function scrollFunction(isMobile) {
  if (!isMobile) { 
   // If this is a desktop screen add your logic for desktop
  } else {
   // else if this is a mobile screen add logic for mobile
  }
}

var matchMedia =  window.matchMedia("(max-width: 400px)") // or whatever you consider mobile width for your use case.
scrollFunction(matchMedia.matches) // Call listener function at run time
matchMedia.addListener(myFunction) // Attach listener function on state changes