jquery - 内容不在视图中时更新数据

Question

当用户滚动内容区域（蓝色轮廓）并且下一个项目几乎位于绿线时，我正在尝试更新信息框中的数据（红色轮廓）。怎么可能做到这一点？

网站 http://puu.sh/3sKnx.PNG

坦克你的任何帮助！

编辑：如果有什么不同：顶部的大头条和信息框<divs>用高固定z-index

Answer 1

仅凭一张图片就很难给出一个很好的答案，但我想类似于下面的东西会起作用。

$("#top-heute").on("scroll", function() {
    var fromTop = $(this).scrollTop(); // Find the scrolled position
    var viewing = Math.round(fromTop / 100) // Assuming your entries are 100 pixels heigh
    // Call some function which sets the info
    setInfo(viewing); // If you had all results in an array e.g.
    setInfo($(".entries", this).slice(viewing - 1)); // Sending across the relevant 'entry'
});

编辑 根据您允许每行具有可变宽度的要求，我制作了一个JSFiddle，它演示了您可以解决此问题的一种方法。

Javascript是最重要的东西：

// Trigger this each time we scroll our div
$("#scroll").on("scroll", function() {
    // Keep track the last row
    var last = $(); 
    // Loop through each row
    $(".row", this).each(function() {
        // If it's scrolled position is above or greater than 10px (margin) we've gone too far, break
        if($(this).position().top >= 10) return;
        last = $(this); // Update the last element otherwise
    });
    var update = $("#updated");
    // Update our info box based on the last element's 'data' attributes
    $(".face", update).html("<img src='" + last.attr("data-img") + "' alt='Profile Picture' />");
    $(".name", update).html(last.attr("data-name"));
    $(".about span", update).html(last.attr("data-last"));
});
// Run the scroll function when we load
$("#scroll").scroll();

希望这可以帮助。仅供参考，这种事情被称为ScrollSpy.