Question

开始滚动时成功添加了类名，但在滚动时继续添加类。

返回到页面顶部后，这些类就会被删除。

function scrollHeader() {
  var elmnt = document.getElementById("rbuxApp");
  var y = elmnt.scrollTop;

  if(y >= 4 && document.getElementById("header").className !== "min-header") {
    document.getElementById("header").className += "min-header ";

}
  else {
    document.getElementById("header").className -= "min-header ";
  };
}

Answer 1

document.getElementById("header").className可以有多个类，在这种情况下document.getElementById("header").className !== "min-header"的条件不起作用。

您可以按空格分割类，然后查看它是否与任何项匹配。当您添加另一个类时，还需要在类名前添加一个空格。所以最好以这种方式尝试。

//Get the class names in array
var classNames = document.getElementById("header").className.split(/\s+/);
//Check if your class exists already
if(classNames.indexOf('min-header') !== -1) {
   //If not add the class to the array
   classNames.push('min-header');
   //Now join the classes back with space and set it back to the className property
   document.getElementById("header").className = classNames.join(" ");
}

当您想通过这种方式从元素中删除类时，可以按照相同的方式：

var index = classNames.indexOf('min-header');
if(index !== -1) {
    classNames.splice(index,1);
    document.getElementById("header").className = classNames.join(" ");
}

Answer 2

因为您使用+=

附加到现有的班级名称

document.getElementById("header").className += "min-header ";

将其更改为

document.getElementById("header").className = "min-header ";

Answer 3

答案在于您添加班级名称的行：

document.getElementById("header").className += "min-header ";

您在末尾添加了一个带有空格的“min-header”，但您只能在没有空格的情况下对“min-header”进行检查。因此，您的元素的className将永远不会等于没有空格的“min-header”，因此类会一次又一次地添加。更有效的方法是使用元素中的classList对象。以下是一些文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList。

您可以使用element.classList.add()将该类添加到您的元素element.classList.contains()以检查它是否已经存在，并element.classList.remove()将其从元素中删除。

为什么这个JavaScript函数会不断地在滚动时添加className？

3 个答案: