Question

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

演示：http://codepen.io/riogrande/pen/RRVVwq（向下滚动以获得效果）。

编辑：有些回答错误的想法我想要的东西，所以我希望标题（元素）继续滚动，但只有当它在视口（可见）时。所以当第一个具有相同类的元素可见时，它会随着滚动而移动，然后当你在它下面滚动它时它不再可见它不应该移动但是另一个可见的应该是移动等等。

Jquery：

(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的位置决定文字的位置。

Answer 2

在这里，您需要检查滚动条中的每个.text：

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

而且很可能你想在window.scroll：

中找到一个debouce

var timer;
$(window).scroll(function() {
    if(timer){ clearTimeout(timer); }
    timer = setTimeout(function(){
       doCheck();
    }, 900);
});

Answer 3

$('.text')返回一个元素数组。您需要将css转换应用于每个项目而不是项目数组。下面的代码可能需要更新以获得您想要的输出，但我认为它应该让您前进。

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

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

3 个答案: