title: how to find the current div based on the scroll position without Jquery
body: <p>Can someone help me out with this. I found a solution for this in Jquery but we need the solution in plain Javascript or Angular. I guess i'm missing something.<a href="https://jsfiddle.net/vqJ5q/57/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <p>When the content on the right panel is scrolled the corresponding left panel should get highlighted. How can we identify the current div element during the scroll to make it active? and that too without using JQuery.</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>var app = angular.module('app', []);
  app.controller('TodoCtrl', ['$scope', '$window', '$element', function($scope, $window, $element) {
    var totalclasses = angular.element(document.querySelector(".section"));
    var offsets = document.getElementById('section3').getBoundingClientRect();
  
    angular.element($window).bind("scroll", function() {
      angular.forEach(totalclasses, function(value, key) {
      });
    });
  }]);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#navigation {
    position: fixed;
    top: 0;
    left: 250px;
  }
  
  #sections {
    position: absolute;
    top: 0;
    left: 400px;
  }
  
  .section {
    height: 300px;
    margin: 10px;
    padding: 10px;
    border: 1px dashed black;
  }
  
  #section5 {
    height: 1000px;
  }
  
  .active {
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div ng-app="app"&gt;
    &lt;div ng-controller="TodoCtrl"&gt;
      &lt;br&gt;
    &lt;/div&gt;
    &lt;div id="navigation"&gt;
      &lt;p id="msg"&gt;
      &lt;/p&gt;
      &lt;ul&gt;
        &lt;li class="section1"&gt;Section 1&lt;/li&gt;
        &lt;li class="section2"&gt;Section 2&lt;/li&gt;
        &lt;li id="section3"&gt;Section 3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="sections"&gt;
      &lt;div data-id="section1" class="section"&gt;
        I'm section 1
      &lt;/div&gt;
      &lt;div data-id="section2" class="section"&gt;
        I'm section 2
      &lt;/div&gt;
      &lt;div data-id="section3" class="section"&gt;
        I'm section 3
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>