javascript - 对具有相同类的所有元素应用函数

Question

我有一个简单的函数来检测元素是否在视口(viewport)中或者它是否可见。如果该元素可见，在每次滚动时，我都会使用 .css() 将该元素向下移动并更改 top 属性以实现一些视差效果。我检查的这个元素在视口(viewport)中，当它移动时，它会在页面上重复 X 次。一切正常，但只有第一个元素有这个问题，所有其他元素从第一个元素继承顶部位置。

演示:http://codepen.io/riogrande/pen/RRVVwq (向下滚动查看效果)。

编辑:一些回答的人误解了我想要什么，所以我希望标题(元素)在滚动时移动，但只有当它在视口(viewport)中(可见)时。因此，当具有相同类的第一个元素可见时，它会随着滚动而移动，然后当您在其下方滚动时，它不再可见，它不应该移动，但另一个可见的元素应该移动等等。

J查询:

(function($) {

  'use strict';

  $.prototype.isVisible = function() {
    var rect = this[0].getBoundingClientRect();
    return (
      (rect.height > 0 || rect.width > 0) &&
      rect.bottom >= 0 &&
      rect.right >= 0 &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.left <= (window.innerWidth || document.documentElement.clientWidth)
    );
  };

  function doCheck() {
    var elementToDetect = $('.text');
    var scrolled = $(window).scrollTop();
    if (elementToDetect.isVisible()) {
      elementToDetect.css('top', (-100 + (scrolled * 0.2)) + 'px');
    }
  }

  $(document).ready(function() {
    doCheck();
  });

  $(window).scroll(function() {
    doCheck();
  });

})(jQuery);

Answer 1

jQuery 在匹配选择器的每个元素上应用类似 css() 的操作。

因此，如果您迭代 jQuery 对象，您会得到:

  function doCheck() {
    var elementToDetect = $('.text');
    var scrolled = $(window).scrollTop();
    for (var index = 0; index < elementToDetect.length; index++) {
      var element = $(elementToDetect[index]);
      if (element.isVisible()) {
        element.css('top', (-100 + (scrolled * 0.2)) + 'px');
      }
    }
  }

这仍然存在问题，因为所有文本相对于其图像都保持相同的顶部。

编辑:实际上，我理解你在做什么，你想让它们都以与你滚动相同的方式移动，所以当图像进入视野时，每个都从图像上方开始。这更接近您的需要:

  function doCheck() {
    var elementToDetect = $('.text');
    for (var index = 0; index < elementToDetect.length; index++) {
      var text = elementToDetect[index];
      var parent = text.parentElement;
      var parentTop = parent.getBoundingClientRect().top;
      var scrolled = (window.innerHeight - parentTop);
      if (scrolled < 0) {
        scrolled = 0;
      }
      if (parentTop < window.innerHeight) {
        $(text).css('top', (-100 + (scrolled * 0.2)) + 'px');
      }
    }
  }

基本上，查看 scrollTop() 是错误的，因为您确实希望父级 div 的位置决定文本的位置。