Changing div content based on scroll position

Question

I am hoping for some help using this code from another Stack Exchange post. Below is the javascript:

$(window).on(\"scroll resize\", function(){
    var pos=         


        

Answer 1

Add an hidden element inside each section containing the description, for i.e. :

<div id="content1">
<p class="description" style="display: none;">content1 description</p>
....
</div>

then in javascript get the description of the relevant section like this:

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

Jsfiddle