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'
});

編集 各行の幅を可変にするという要件に基づいて、この問題に対処する方法の 1 つを示す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ます。