Cambiar el contenido div basado en la posición de desplazamiento

Espero que me ayuden a usar este código en otra publicación de Stack Exchange. Debajo está el javascript:

$(window).on("scroll resize", function(){ var pos=$('#date').offset(); $('.post').each(function(){ if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) { $('#date').html($(this).html()); //or any other way you want to get the date return; //break the loop } }); }); $(document).ready(function(){ $(window).trigger('scroll'); // init the value }); 

Lo he implementado en mi propio sitio web aquí: http://peterwoyzbun.com/newscroll/scroll.html . Cuando la posición de desplazamiento alcanza cierto punto, la información en el cuadro cambia. Por el momento, el contenido cambiante proviene directamente del div “.post”. Es decir, cuando un usuario se desplaza a un “.post” dado, el cuadro gris fijo carga lo que está en “.post”.

Lo que me gustaría hacer es hacer que el cuadro gris muestre una descripción de lo que el usuario está viendo actualmente. Entonces, cuando el usuario llega al div “content1”, el cuadro gris muestra una descripción de texto de “content1”. ¿Quizás cuando se llega a “content1”, una div “description1” queda oculta dentro del cuadro gris?

Cualquier ayuda sería muy apreciada. ¡Gracias!

Agregue un elemento oculto dentro de cada sección que contenga la descripción, por ejemplo:

 
....

luego en javascript obtén la descripción de la sección relevante de esta manera:

 if(pos.top >= $(this).offset().top && pos.top < = $(this).next().offset().top) { $('#date').html($(this).find('.description').text()); return; } 

Jsfiddle