javascript - 如何使导航栏在滚动时改变颜色，但仅当屏幕宽度大于 600px 时？

Question

所以我有这个函数，当 scrollTop 大于 100 时，它会改变导航栏的颜色。然后我添加了一个 if 语句，它应该只在屏幕宽度大于 600px 时添加滚动事件监听器。问题是代码不工作。

const nav = document.querySelector('.navbar');

function addScrollStyle() {
  nav.style.backgroundColor = document.documentElement.scrollTop > 100 ? 'rgba(33,33,33,1)' : 'rgba(0,0,0,0)';
  nav.style.transition = 'all .2s ease-out';
}

if (window.innerWidth > '600') {
  nav.addEventListener('scroll', addScrollStyle);
}

我不太确定为什么它不起作用。我也在 jQuery 中尝试过这个，但我在做同样的事情。所以我现在正尝试坚持使用 vanilla JS，因为我更了解它。无论如何帮助将不胜感激。谢谢!

Answer 1

问题是您的window.innerWidth 检查只会触发一次；在页面加载上。您需要将其包装在每次调整窗口大小时调用的函数中，这可以通过 window.onresize 完成。此外，600 必须是数字，而不是字符串。

const nav = document.querySelector('.navbar');

function addScrollStyle() {
  nav.style.backgroundColor = document.documentElement.scrollTop > 100 ? 'rgba(33,33,33,1)' : 'rgba(0,0,0,0)';
  nav.style.transition = 'all .2s ease-out';
}

window.onresize = function(event) {
  if (window.innerWidth > 600) {
    nav.addEventListener('scroll', addScrollStyle);
  }
};

希望这对您有所帮助!