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

Question

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

Website 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。