當內容不在視圖中時更新數據

Question

我試圖在用戶滾動內容區域（以藍色表示）並且下一個項目接近綠線時更新信息框中的數據（以紅色標出）。 這怎麼辦？

Website http://puu.sh/3sKnx.PNG

坦克您的幫助！

編輯： 如果它的確與衆不同：在頂部的大headbar和信息框固定<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(); 

希望這有助於。 FYI這種東西被稱爲ScrollSpy。