title: Adding active class to menu when section changes
body: <p>when i scroll the page, i want to add class active menu item.
  i can get the current div id like this var currSection = $(this).attr('id'). im stuck with id and data-id matching.
  here is the codes. ty for helping guys.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).scroll(function() {
  
      var cutoff = $(window).scrollTop();
  
      $('div').each(function(){
          if($(this).offset().top + $(this).height() &gt; cutoff){
              $('div').removeClass('current');
              $(this).addClass('current');
  
              var currSection = $(this).attr('id'); 
  
              console.log(currSection);
  
              if ($('.circle li').data('id') == currSection) {
                
              };
  
              return false; 
  
  
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul{
    position:fixed;
    z-index:9;
    top:0;
  }
  .active{
    color:red;
  }
  div{
    height:500px;
  }
  div:nth-child(odd){
    background:green;
  }
  div:nth-child(even){
    background:blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="home"&gt;&lt;/div&gt;
  &lt;div id="who"&gt;&lt;/div&gt;
  &lt;div id="team"&gt;&lt;/div&gt;
  &lt;div id="why"&gt;&lt;/div&gt;
  &lt;div id="contact"&gt;&lt;/div&gt;
  
  &lt;ul class="circle"&gt;
      &lt;li data-id="home" class="active"&gt;a&lt;/li&gt;
      &lt;li data-id="who"&gt;b&lt;/li&gt;
      &lt;li data-id="team"&gt;c&lt;/li&gt;
      &lt;li data-id="why"&gt;d&lt;/li&gt;
      &lt;li data-id="contact"&gt;f&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>