Mettre à jour les données lorsque le contenu n'est pas visible

Question

J'essaie de mettre à jour les données dans la boîte d'information (en rouge) lorsque l'utilisateur fait défiler la zone de contenu (en bleu) et que l'élément suivant est presque à la ligne verte. Comment cela a-t-il pu être fait?

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

réservoir vous pour toute aide!

Edit: Si cela fait une différence: La grande headbar sur le dessus et la boîte d'information sont fixés <divs> avec un haut z-index

Answer 1

Il est très difficile de donner une excellente réponse avec juste une image et rien à travailler avec , mais j'imagine que quelque chose de similaire à ci-dessous fonctionnerait.

$("#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' 
}); 

Modifier Sur la base de vos besoins pour permettre à chacune des lignes à être d'une largeur variable, je l'ai produit une JSFiddle qui démontre d'une façon que vous pouvez aborder ce problème.

Le Javascript est la chose la plus importante à regarder:

// 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(); 

Hope this helps. FYI ce genre de chose est connu comme ScrollSpy.