如果元素在滚动后出现在屏幕上答案

【问题标题】：If element is on the sceen after scroll如果元素在滚动后出现在屏幕上
【发布时间】：2016-05-01 10:59:32
【问题描述】：

您好，当我滚动时，我正在尝试获取元素现在是否在屏幕上。我有这个代码：

$(window).scroll(function() {
  if (checkVisible($('.tester'))) {
    $('.wrapper').css("background-color", "#4f4");
  } else {
    $('.wrapper').css("background-color", "#f44");
  }
});

function checkVisible(elm, eval) {
  eval = eval || "visible";
  var vpH = $(window).height(), // Viewport Height
    st = $(window).scrollTop(), // Scroll Top
    y = $(elm).offset().top,
    elementHeight = $(elm).height();

  if (eval == "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
  if (eval == "above") return ((y < (vpH + st)));
}

body, html {
  height: 100%;
}
.wrapper {
  height: 400%;
  background: none repeat scroll 0 0 #f44;
}
.tester {
  position: absolute;
  left: 50%;
  width: 300px;
  height: 600px;
  background: none repeat scroll 0 0 #fff;
  border: 5px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="tester"></div>
</div>
<div class="wrapper">
  <div class="tester"></div>
</div>

它很好用

好的，我编辑了代码，所以现在它是类而不是 id。一切都一样 - 不能正常工作，只有第一个“测试员”。

【问题讨论】：

不要对多个元素使用相同的 id。无效。
an id 对于整个文档应该是唯一的。如果您有两个具有相同 id 的元素，则您的 html 在技术上是无效的。在这种情况下，您应该使用类而不是 id。
不要重新发明轮子。看看这个小库imakewebthings.com/waypoints
我知道，这只是一个例子，我使用相同的类，但一切都像 id's(

标签： javascript jquery html css scroll

【解决方案1】：

id 必须是唯一的，就像 xxxmatko 在评论中所说的那样。我会使用类似的类：你将 id "wrapper" 更改为 class="wrapper"

在 css 中，您可以将 #wrapper 更改为 .wrapper

【讨论】：

你是对的，但这只是示例，类与 id 相同。
这不是 100% 正确的，因为 id 是唯一的，并且您可以根据需要使用任意数量的类。
是的，我编辑了示例，所以现在有课程，但一切都一样，只工作第一个测试员，其他人不工作（

【解决方案2】：

如果元素的 scrollTop 大于元素的 -(height) 并且小于浏览器窗口的高度，则它在滚动后的页面上。

也不要使用重复的 ID。

https://www.w3.org/TR/WCAG20-TECHS/H93.html

【讨论】：

谢谢，但这不是问题的原因，第一个测试仪工作正常，但第二个没有。在我的项目中，我动态创建了包装器和测试器，所以它们有很多，但只适用于第一个。