Changing contents of multiple divs depending on scroll position

Changing contents of multiple divs depending on scroll position

I have 5 sections on my site, and a fixed div with 2 divs inside that I
want the contents to change depending what section is scrolled over/in
view.
I found this jsFiddle which is like what I want to achieve but not quite,
and I can't work out how to make it work for me.
Here is the JS code used in that jsFiddle which I assuming a few
modifications should be all it takes:
$(window).load(function () {
$(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).find('.description').text()); //or any
other way you want to get the date
return; //break the loop
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
})
Here is a few snippets of HTML from my site:
The sections:
<section id="space">
</section>
<section id="sky">
</section>
<section id="home">
</section>
<section id="about">
</section>
<section id="involved">
</section>
And the 2 divs:
<div id="caption1" class="nivo-html-caption">
<h1><strong>Test Test Headline home</strong></h1><em></em>
<div class="headline"><p>Home1 Home1 Home1</p></div>
</div>
<div id="caption2" class="nivo-html-caption">
<h1><strong>Test Test Headline 2 home</strong></h1> <em></em>
<div class="headline"><p>Home2 Home2 Home2</p></div>
</div>
So to summarise, when scrolling over the home section the "Test test
Headline home" "Home1 Home 1 Home1" and also the "Test test Headline home
2" "Home2 Home2 Home2" will remain the same but if for instance scrolling
over the space section they will change to say "Test test Headline Space"
"Space space space" etc.
Thanks in advance!