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中尝试过这个，但我也在做同样的事情。所以我现在正试图坚持使用香草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);
  }
};

希望这有帮助！

如何在滚动条上更改导航栏颜色，但仅在屏幕宽度大于600px时？

1 个答案: