Question

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

氏

Answer 1

谁说视口中只有一张图片？当有很多时你想做什么？

但是否则你总是可以通过图像以及图像的顶部偏移来获得容器的滚动位置，以查看当前哪个位于视图中。

因此，这些值将使您获得结果

容器滚动位置
容器可见客户端高度
images'top offset

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

这是一个简化的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就绪，因为您必须等待文档加载才能使图像显示有最后的职位。

如何在视口中显示元素？ jQuery的

1 个答案:

因此，这些值将使您获得结果

重要