Question

你好我正试图获取当我滚动时元素现在在屏幕上。我有这段代码：

$(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>

效果很好＆lt;但如果有两个或更多div与id或类测试器，它不能与其他人一起工作。为什么？谢谢！

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

Answer 1

id必须是唯一的，就像xxxmatko在评论中所说的那样。我会使用类intead：你改变id＆＃34;包装＆＃34; to class =＆＃34; wrapper＆＃34;

在css中你可以将#wrapper改为.wrapper

Answer 2

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

也不要使用重复的ID。

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

如果元素在滚动后出现在场景中

2 个答案: