Question

我正在开发我的网站，我有一个按钮（位置：固定），每次我点击它我需要它将页面滚动到下一个具有class =“picture”的div并且首先在scrollTop下方（）.top值。我在$ pictures数组中存储了带有class =“picture”的div，但我不确定是否需要...

$(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/

得到div存储在数组x，y位置

1 个答案: