Setting header color on scroll for each post
jsBin demo

Instead of storing section positions on window onload time, which can be always kind of inaccurate since your images might still load...  

get dynamically  the current position / size data of an element using:

element.getBoundingClientRect()

using that JS method you don't even need to calculate the $(window).scrollTop()
 cause the returned value is the element's position respective to the client top (viewport top edge).

To retrieve only the one element that matches a top criteria you can use the jQuery's .filter() method and return the element which...

$section.filter(function(){
    var r = this.getBoundingClientRect();
    return  r.top + r.height - 100  &gt; 0; // ...matches this
})


(100 is the header height in this demo; set as desired or calculate dynamically)

Now, since jQuery filtered more than one element that matches that criteria of (gbcr.top + gbcr.height - headeroffser) &gt; 0 by going directly to chain another method to it like .data(), the value will be respective to the first of elements returned in the .filter() collection:

$header.css({
  color : $section.filter(function(){
    var r = this.getBoundingClientRect();
    return  r.top + r.height - 100 &gt; 0;
  }).data().colour // is the colour data of the first of filtered elements
});


Store that colouring stuff inside a setScrollColors function and use like:



$(function() { // DOM ready shorthand

  var $header  = $("header");  // Cache selectors
  var $section = $("section");

  function setScrollColors() {
    $header.css({
      color : $section.filter(function(){
        var r = this.getBoundingClientRect();
        return  r.top + r.height - 100 &gt; 0;
      }).data().colour
    });
  }

  setScrollColors();                            // Call inside dom ready
  $(window).on("load scroll", setScrollColors); // call also on load and scroll

});
*{margin:0;}
header{
  position:fixed;
  z-index:1;
  top:0;
  width:100%;
  background:#f9f9f9;
  height:100px;
  border-bottom:1px solid currentColor;
}
#content{
  margin-top:100px;
}
section{
  min-height: 1000px;
  min-height: calc(100vh - 100px);
  border-top:1px solid #000;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;header&gt;&lt;h1&gt;HEADER&lt;/h1&gt;&lt;/header&gt;

&lt;div id="content"&gt;
  &lt;section data-colour="black"&gt;black&lt;/section&gt;
  &lt;section data-colour="red"&gt;red&lt;/section&gt;
  &lt;section data-colour="blue"&gt;blue&lt;/section&gt;
  &lt;section data-colour="green"&gt;green&lt;/section&gt;
  &lt;section data-colour="fuchsia"&gt;fuchsia&lt;/section&gt;
  &lt;section data-colour="orange"&gt;orange&lt;/section&gt;
&lt;/div&gt;