title: How to add active class while scrolling in div?
body: <p>Could you please tell me how to add an active class while scrolling in a div? I have one container, in which there are four divs. In the footer I also have four <code>li</code> (first, second, third). I want to select the <code>li</code> when the user scrolls the div.</p>
  
  <p>Example</p>
  
  <p>When the code runs, the first <code>li</code> should be selected because the first div is in the view port. If the user scrolls and moves to the second div, the second <code>li</code> should be selected. And so on.</p>
  
  <p>I tried like that</p>
  
  <p><a href="https://jsbin.com/giwizufotu/edit?html,css,js,output" rel="nofollow noreferrer">https://jsbin.com/giwizufotu/edit?html,css,js,output</a></p>
  
  <pre><code>(function(){
    'use strict';
    $(function(){
      $( "#container" ).scroll(function() {
        console.log('scrlling');
        if (elementInViewport2($('#first'))) {
          // The element is visible, do something
          console.log('first visible')
      } else {
           console.log('second visible')
      }
      });
    })
  
    function elementInViewport2(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;
  
    while(el.offsetParent) {
      el = el.offsetParent;
      top += el.offsetTop;
      left += el.offsetLeft;
    }
  
    return (
      top &lt; (window.pageYOffset + window.innerHeight) &amp;&amp;
      left &lt; (window.pageXOffset + window.innerWidth) &amp;&amp;
      (top + height) &gt; window.pageYOffset &amp;&amp;
      (left + width) &gt; window.pageXOffset
    );
  }
  
  })()
  </code></pre>
  
  <p>I don't want to use plugin</p>