时间戳

首页 > 解决方案 > JS在向下滚动到某个部分时更改类无法正常工作

javascript - JS在向下滚动到某个部分时更改类无法正常工作

问题描述

我有一个可行的功能，它会触发我的部分并在它进入视图时将它的类更改为另一个类。这里是：

<script>
document.addEventListener('scroll', function (e) {
  var top  = window.pageYOffset + window.innerHeight,
      isVisible = top > document.querySelector('#container').offsetTop;

   if (isVisible) {
     document.getElementById('container').setAttribute("class", "h2class2")
   }
});
</script>

但是我有 3 个不同的部分，出于某种原因，它们在第一次触发后同时改变了样式。我做错了什么？这是 3 个不同触发器的代码，它们是相同的，只是 ID 和类和变量已更改：

<!-- THE FIRST TRIGGER-->
<script>
document.addEventListener('scroll', function (e) {
  var top  = window.pageYOffset + window.innerHeight,
      isVisible = top > document.querySelector('#container').offsetTop;

   if (isVisible) {
     document.getElementById('container').setAttribute("class", "h2class2")
   }
});
</script>

<!-- THE SECOND TRIGGER-->
<script>
document.addEventListener('scroll', function (e) {
  var top2  = window.pageYOffset + window.innerHeight,
      isVisible2 = top2 > document.querySelector('#container2').offsetTop;

   if (isVisible2) {
     document.getElementById('container2').setAttribute("class", "p2class2")
   }
});
</script>

<!-- THE THIRD TRIGGER-->
<script>
document.addEventListener('scroll', function (e) {
  var top3  = window.pageYOffset + window.innerHeight,
      isVisible3 = top3 > document.querySelector('#container3').offsetTop;

   if (isVisible3) {
     document.getElementById('container3').setAttribute("class", "h3class2")
   }
});
</script>

谢谢你的帮助。

标签： javascript

解决方案

所以，我通过将触发器 ID 更改为部分 ID 解决了这个奇怪的问题，之前它们是 P 和 H 的 ID。这很奇怪，但是在我将触发器 ID 更改为部分 ID 之后，它开始正常工作。我的意思是这一行：

isVisible = top > document.querySelector('#container').offsetTop;

#container 应该是一个部分。（在我的情况下，它只有在更改后才开始正常工作）

推荐阅读