title: Detecting if section is currently visible on scroll
body: <p>I am trying to do a sort of navigation based on current section. </p>
  
  <p>My code is as follows:</p>
  
  <pre><code>$(function() {
      'use strict';
  
      function setTitle(title) {
          $('.overlay').text(title);
      }
  
      function removeTitle() {
          $('.overlay').text('');
      }
  
      $(window).on('scroll', function() {
          let windowScroll = $(window).scrollTop(),
              sections = $('section[data-title]');
  
          sections.each(function() {
              let thisStart = $(this).offset().top,
                  thisHeight = $(this).outerHeight(true),
                  thisTitle = $(this).attr('data-title'),
                  thisEnd = thisHeight + thisStart;
  
              console.log(`start: ${thisStart}, end: ${thisEnd}, scroll: ${windowScroll}`);
  
              if(windowScroll &gt;= thisStart &amp;&amp; windowScroll &lt; thisEnd) {
                  setTitle(thisTitle);
              } else {
                  removeTitle();
              }
          });
      });
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;section class="section section-first"&gt;&lt;/section&gt;
  &lt;section class="section section-what" data-title="First"&gt;
  &lt;/section&gt;
  &lt;section class="section section-cv" data-title="Secound"&gt;
  &lt;/section&gt;
  &lt;div class="overlay"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Unfortunately, it works only with last <code>.section</code>. What can I do?</p>
  
  <p>Please refer to my CodePen to see what I mean exactly: <a href="http://codepen.io/tomekbuszewski/pen/Xmovwq" rel="nofollow">http://codepen.io/tomekbuszewski/pen/Xmovwq</a></p>