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

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。