title: How to change active tab on navbar when scrolling until a component is visible?
body: <p>I have a navBar with multiple tabs which I can click and it scrolls me to the component (scrollToComponent), it also sets that tab as the active one.</p>
  
  <p>I also want to do the oposite, scroll and when a component is visible it should mark the corresponding tab as the active one.</p>
  
  <p>I found <a href="https://jsfiddle.net/cse_tushar/Dxtyu/141/" rel="nofollow noreferrer">this fiddle</a>, that demonstrates exactly what I need, but it uses Jquery, and the items that it scrolls to are not components, and all of them have the same height.</p>
  
  <pre><code>$(document).ready(function () {
  $(document).on("scroll", onScroll);
  
  function onScroll(event){
  var scrollPos = $(document).scrollTop();
  $('#menu-center a').each(function () {
      var currLink = $(this);
      var refElement = $(currLink.attr("href"));
      if (refElement.position().top &lt;= scrollPos &amp;&amp; refElement.position().top + refElement.height() &gt; scrollPos) {
          $('#menu-center ul li a').removeClass("active");
          currLink.addClass("active");
      }
      else{
          currLink.removeClass("active");
      }
  });
  </code></pre>