将div存储在数组x，y位置

Question

我正在开发我的网站，我有一个按钮(位置:固定)，每次我点击它，我需要它来滚动页面到下一个目录，其中有class=“图片”，并首先低于scrollTop().top值。我将带有class=“图片”的div存储在$pictures数组中，但我不确定是否需要它……

$(document).ready(function()
{

  var $pictures = $('.picture');

  var i;

  $(window).scroll(function()
  {
    for(i in $pictures)
    {
      if($("html").scrollTop() > $pictures[i].offset().top)
      {
        alert(i);
      }
    }
  });
});

不幸的是，它不能工作。也许有人有更好的方法？

谢谢!

Answer 1

尝尝这个。除了被误导的for-in循环之外，您还需要计算$(window).scrollTop()而不是$('html').scrollTop()，后者总是等于零。

$(document).ready(function() {
    var $pictures = $('.picture');

    $(window).scroll(function() {
        $pictures.each(function(i, el) {
            if ($(window).scrollTop() > $(this).offset().top) {
                console.log(i);
            };
        });
    });
});​

http://jsfiddle.net/mblase75/Uysmz/

这将记录滚动出屏幕的每一张图片的索引号。或者，如果您只想要滚动出屏幕的最后一张图片，则可以使用.filter函数：

$(document).ready(function() {
    var $pictures = $('.picture');

    $(window).scroll(function() {
        $justpast = $pictures.filter(function(i, el) {
            return ($(window).scrollTop() > $(this).offset().top);
        }).last();
        console.log($justpast.index());
    });
});​

http://jsfiddle.net/mblase75/RuR6R/