Question

我正在尝试在滚动条上添加className。我不断收到

文档未定义

编辑：我发现我从错字中得到了错误。当我定义document.getElementsByClassName("main-nav").scrollTop时，console中什么也没有出现。以及页面不会受到影响。

window.onscroll = function() {
  windowScroll();
};

function windowScroll() {
  if (document.getElementsByClassName("main-nav").scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementsByClassName("main-nav").className = "test";
  } else {
    document.getElementsByClassName("main-nav").className = "";
  }
}

CSS是

.test {
  background: pink
}

我不一定要寻找答案，我只需要指导

Answer 1

有2个问题：

getElementsByClassName返回一个数组HTMLCollection，它没有属性scrollTop。您可能想要第一项，所以document.getElementsByClassName("main-nav")[0]

但是，如果尝试尝试，则会出现错误：

无法读取未定义的属性'scrollTop'

window.onscroll = function() {
  windowScroll();
};

function windowScroll() {
  if (document.getElementsByClassName("main-nav").scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementsByClassName("main-nav").className = "test";
  } else {
    document.getElementsByClassName("main-nav").className = "";
  }
}

html, body {
  height: 150%;
}

.test {
  background: pink
}

<div class="main-nav"></div>

原因是您通过此分配覆盖了class的{{1}}属性：

.main-nav

在这一行中，您将document.getElementsByClassName("main-nav").className = "";属性设置为空字符串。您可能想添加/删除测试调用，但保留class类。

您可以做两件事：

将main-nav属性设置为id而不是main-nav属性，然后使用class方法。

document.getElementById

window.onscroll = function() {
  windowScroll();
};

function windowScroll() {
  if (document.getElementById("main-nav").scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("main-nav").className = "test";
  } else {
    document.getElementById("main-nav").className = "";
  }
}

html, body {
  height: 150%;
}

#main-nav {
  position: fixed;
  width: 100%;
}

.test {
  background: pink
}

使用<div id="main-nav">Main Nav</div>仅切换test类。

classList.toggle

window.onscroll = function() {
  windowScroll();
};

function windowScroll() {
  if (document.getElementsByClassName("main-nav")[0].scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementsByClassName("main-nav")[0].classList.add("test");
  } else {
    document.getElementsByClassName("main-nav")[0].classList.remove("test");
  }
}

html, body {
  height: 150%;
}

.main-nav {
  position: fixed;
  width: 100%;
}

.test {
  background: pink
}

经过优化的最终方法：

<div class="main-nav">Main Nav</div>

var mainNav = document.querySelector('.main-nav');

window.onscroll = function() {
  windowScroll();
};

function windowScroll() {
    mainNav.classList.toggle("test", mainNav.scrollTop > 50 || document.documentElement.scrollTop > 50);
}

html, body {
  height: 150%;
}

.main-nav {
  position: fixed;
  width: 100%;
}

.test {
  background: pink
}

更改：

将<div class="main-nav">Main Nav</div>元素存储在全局上下文（.main-nav对象）上。它不会改变，因此您无需在任何滚动条中找到它。
使用querySelector，您将获得单个DOM元素，而不是集合。
使用classList.toggle按条件切换课程。

Answer 2

console.log的问题在于，您试图为1个或多个div的HTML集合（页面中的元素集合）拉动scrollTop，因此无法将scrollTop检查为console.log，因为它实际上没有该属性。

假设“ main-nav”类只有一个元素（或者您希望将其应用于该类的特定元素），那么最好使用以下一种方法：{{1 }}或document.getElementsByClassName("main-nav")[0]（后者会要求您创建主导航ID而不是类）。

但是，对于第一个，使用className会重新分配类名称，而不是将其添加到该特定的div，因此，您可以使用document.getElementById("main-nav")（如果使用document.getElementsByClassName("main-nav")[0].classList.add("test")而不是remove不符合您的条件）。

如果“ main-nav”类包含多个元素，您仍然可以使用我建议的第一个选项-仅需要将其包装在for循环中，然后将0替换为您选择的变量。

add

在JavaScript中滚动添加className

2 个答案: