title: Change sticky header text depending on distance from top of page
body: <p>Hi, trying to have the text inside a sticky header change in relation to how far away it is from the top of the page.  Supposing I have a single page site, with several distinct did sections each measuring 100vh.  The nav links to them via href="#sectionA", "#sectionB", etc.</p>
  
  <p>So if I start on the landing page and scroll down to "sectionA" the header should change to that sections title.  Couldn't figure out how to do this using the .href but if that is a preferable way I'm amendable.</p>
  
  <p>Currently have:</p>
  
  <pre><code>function scrollChange(id) {
      var winHeight = window.innerHeight;
      if (window.scrollBy(winHeight)) {
          document.getElementById(title).innerHTML = 'SomethingB';
      }
  
      else if (window.scrollBy(winHeight * 2)) {
          document.getElementById(title).innerHTML = 'SomethingC';
      }
  
      else {
          document.getElementById(title).innerHTML = 'somethingA';
      }
  }
  
  document.addEventListener('scroll', function() {scrollChange();});
  </code></pre>
  
  <p>The DOM manipulation doesn't matter for right now; just trying to get the correct reference by scroll.  No JQuery answers please.  Thank you!!</p>