Question

如何在用户手动滚动并到达某个类（在此示例中为“content”）时，将其添加到名为navigation的类中的50px的顶部填充。

这就是我所拥有的，但它不起作用，任何帮助都表示赞赏。

window.onscroll = function() {
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  if (scrollTop >= document.getElementsByClassName("content").offsetTop) {
    document.getElementsByClassName("navigation").style.paddingTop = "50px";
  } else {
    document.getElementsByClassName("navigation").style.paddingTop = "0px";
  }
}

Answer 1

getElementsByClassName()返回一个类似数组的对象，因此您需要在使用它时引用要更改的元素的索引。或者，您可以改为使用id这些元素并使用getElementById()

window.onscroll = function() {
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  if (scrollTop >= document.getElementsByClassName("content")[0].offsetTop) {
    document.getElementsByClassName("navigation")[0].style.paddingTop = "50px";
  } else {
    document.getElementsByClassName("navigation")[0].style.paddingTop = "0px";
  }
}

.content {
  padding-top: 100px;
  height: 300vh;
}
.navigation {
  background: #eee;
}

<div class="content">
  <div class="navigation">asdf</div>
</div>

在滚动上添加填充

1 个答案: