2

我在页面上有一个图像列表。当我滚动页面时，我想在当前视口中图像的导航栏中显示一些选项。因此我需要获取当前在视口中的图像元素，这可能吗？

雅各布

4

1 回答 1

3

谁说视口中只有一张图像？人多的时候你想做什么？

但除此之外，您始终可以使用图像获取容器的滚动位置以及图像的顶部偏移量，以查看当前处于视图中的图像。

所以这些值会让你得到你的结果

  • 容器滚动位置
  • 容器可见客户端高度
  • 图像的顶部偏移

使用这些值可以定位视图中的所有图像，无论它们是完全显示还是部分显示（在顶部或底部）。

这是一个简化的JSFiddle ，它在第一个完全可见的图像周围给出了红色边框。代码这样做：

// get top positions and references to all images
var pos = $("img").map(function(){
  var $this = $(this);
  return {
    el: $this,
    top: $this.offset().top
  };
}).get();

// provide document scrolling
$(document).on("scroll", function() {

  $("img").removeClass("first-in-view");

  var scroll = $(this).scrollTop();
  var i = 0;
  while(pos[i].top < scroll) i++;

  pos[i].el.addClass("first-in-view");

}).scroll();

这应该优化为仅在需要时切换类。否则，我们在每个滚动中都会闪烁。但它展示了如何做到这一点，您可以从这里开始。

重要的

将图像位置确定过程附加到文档加载事件而不是通常使用的 DOM 准备就绪是非常重要的，因为您必须等待文档加载才能使图像具有最终位置。

于 2013-01-11T14:33:05.030 回答