title: javascript - Get headers hash while scrolling
body: <p>I have a page with multiple headers (h1,h2,h3). I need to get header ID and put it in URL as hash while I scroll through the page.</p>
  
  <p>Example code below.</p>
  
  <pre><code>&lt;div&gt;
    &lt;h1 id="random_numbers_here"&gt; 
      &lt;p&gt; lorem ipsum &lt;/p&gt;
    &lt;h1 id="random_numbers_here"&gt; 
      &lt;p&gt; lorem ipsum &lt;/p&gt;
    &lt;h2 id="random_numbers_here"&gt; 
      &lt;p&gt; lorem ipsum &lt;/p&gt;
    &lt;h3 id="random_numbers_here"&gt; 
      &lt;p&gt; lorem ipsum &lt;/p&gt;
    &lt;h3 id="random_numbers_here"&gt; 
      &lt;p&gt; lorem ipsum &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My JS code:</p>
  
  <pre><code>$('.page').on('scroll',(function(){
      var winTop = $('.page').scrollTop();
      var h1 = $('h1');
      var h2 = $('h2');
      var h3 = $('h3');
  
      $(h1).each(function(){
          console.log(
          $(this).offset().top &lt; winTop +10 
          &amp;&amp; $(this).offset().top + $(this).height() &gt; winTop + 10);
      })
  }));
  </code></pre>
  
  <p>When my "header detector" will work ill just $(this).attr('id') and use window.location.hash to put it in URL.</p>
  
  <p>But it gives me true or false on wrong headers. On h2 it returns true while im at h3.</p>
  
  <p>I have no idea how to make this work.</p>