滚动eventListener停止工作

Question

问题是当我启用eventListener宽度时，滚动eventListener停止工作。

 var header = document.getElementById("header"); var nav = document.getElemantById("ulArea"); var HaLogo = document.getElementById("logo"); var yPosition = window.scrollTop(); window.addEventListener("scroll" , yScroll); function yScroll () { if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { header.style.height = "90px"; logo.style.float = "left"; logo.style.height = "90px"; logo.style.width = "90px"; logo.style.margin = "0px 0px 10px 30px"; ulArea.style.margin = "0px 0px 0px auto"; ulArea.style.float = "none"; } else { header.style.height = "220px"; logo.style.background = "transparent"; logo.style.float = "none"; logo.style.height = "150px"; logo.style.width = "150px"; logo.style.margin = "0 auto"; ulArea.style.margin = "0 auto"; ulArea.style.float = "none"; } } window.addEventListener("width" , headerHeight) function headerHeight() { if (document.getElementById("header").width < 990px) { header.style.height = "100px"; } else { header.style.height = "220px"; } } 

Answer 1

我认为您实际上正在寻找的是resize事件，而不是width事件：

window.addEventListener('resize', function(event){
  // do stuff here
});

Answer 2

您的代码存在一些问题：

1. 您需要使用resize事件（没有width事件）。
2. 我认为未定义logo变量，您是说HaLogo吗？
3. ulArea未定义。
4. 您需要使用元素的.style.width属性（ .width不存在）。
5. 您需要使用parseInt将元素的宽度解析为一个整数。 如果您不解析它，则将类似'50px'的字符串与int 990 。
6. 将< 990px更改为< 990 （删除px ）。

您应该以if (parseInt(document.getElementById("header").style.width) < 990) {对于您的if语句和window.addEventListener("resize", headerHeight); 为您的第二个事件侦听器。