title: Angular get offset of element by id
body: <p>I try to set the navbar li object to active when i currently watch the corresponding section.
  In other words: When scrolling through my page (single page with multiple sections), the section i'm watching should be highlighted in the navbar.</p>
  
  <p>I already got the scrolling position via directive. Where I fail is to trigger ng-class on the .nav ul li.</p>
  
  <pre><code>&lt;li class="" ng-class="{'active': $parent.scrollPos &gt; document.getElementById('something').offset()}"&gt;
     &lt;a class="" ng-click="isCollapsed = true" href="#something" du-smooth-scroll&gt;Something&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I doesn't make any difference when I use </p>
  
  <pre><code>ng-class="{'active': $parent.scrollPos &gt; angular.element('#something').offset()}"
  </code></pre>
  
  <p>How do I get the distance from document-top of any element? </p>
  
  <p>Thanks a lot. </p>
  
  <p>PS: I use jQuery (not lite)!</p>
  
  <p><strong>EDIT</strong>
  How it works (Thanks to @Sharikov Vladislav):
  On body I use the "PageCtrl":</p>
  
  <pre><code>&lt;body id="page-top" class="index bg-default" ng-app="previewApp" ng-controller="PageCtrl"&gt;
  </code></pre>
  
  <p>which looks like that:</p>
  
  <pre><code>angular.module('previewApp')
    .controller('PageCtrl', function($scope, $element) {
      $scope.scrollPos = 0;
      $scope.getOffset = function (elementId) {
        var element = $element.find(elementId);      
        return element.offset().top;
      };
    });
  </code></pre>
  
  <p>Right after the body I use a span </p>
  
  <pre><code>&lt;span scroll-position="scrollPos"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>to initialise my "scrollPosition"-directive, which allows me to access the current scroll position over the $scope.scrollPos in PageCtrl.
  Directive:</p>
  
  <pre><code>angular.module('previewApp')
    .directive('scrollPosition', function ($window) {
      return {
        scope: {
          scrollPos: "=scrollPosition"
        },
        link: function (scope, element, attrs) {
          var windowElement = angular.element($window);
          var handler = function () {
            scope.scrollPos = windowElement.scrollTop();
          }
          windowElement.on('scroll', scope.$apply.bind(scope, handler));
          handler();
        }
      };
    });
  </code></pre>
  
  <p>In my .nav ul li looks like the following. The "- 150" is for a more acurate highlighting. </p>
  
  <pre><code>&lt;div class="navbar-collapse" uib-collapse="isCollapsed" id="menu-center"&gt;
     &lt;ul class="nav navbar-nav navbar-right"&gt;
         &lt;li class="hidden"&gt;
             &lt;a href="#page-top"&gt;&lt;/a&gt;
         &lt;/li&gt;
         &lt;li ng-class="{'active': $parent.scrollPos &gt; $parent.getOffset('#section1') - 150 &amp;&amp; $parent.scrollPos &lt; $parent.getOffset('#section2') - 150}"&gt;
           &lt;a ng-click="isCollapsed = true" href="#section1" du-smooth-scroll&gt;Section1&lt;/a&gt;
         &lt;/li&gt;
         &lt;li ng-class="{'active': $parent.scrollPos &gt; $parent.getOffset('#section2') - 150 &amp;&amp; $parent.scrollPos &lt; $parent.getOffset('#section3')}"&gt;
           &lt;a ng-click="isCollapsed = true" href="#section2" du-smooth-scroll&gt;Section2&lt;/a&gt;
         &lt;/li&gt;                 
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I hope this helps somebody out there who is struggling over the same problem like me. Greets</p>