title: Affix element with pure AngularJs
body: <p>I'm trying to create an <code>affix</code> element om my page and I'm using pure AngularJs, no jquery.</p>
  
  <p>I tried some different solutions to achieve this, but none of them seem to work.
  The problem is to get the offsetTop of the element i want to fix after the scroll.</p>
  
  <p>This is running inside a directive that is executed on every scroll on the page.</p>
  
  <p>This is the code i tried:</p>
  
  <pre><code>.directive("scroll", ['$window', function ($window) {
      return function(scope, element, attrs) {
          angular.element($window).bind("scroll", function() {
  
              //This code returns: '0'
              var filter= document.getElementById('filter').offsetTop;
  
              //This code returns: Error: [jqLite:nosel] 
              var filter = angular.element('#filter').prop('offsetTop');
  
              //This code returns: [object HTMLDivElement]
              var filter = angular.element(document.querySelector('.filter')).prop('offsetTop');
  
              //This code returns: '0'
              var filter = angular.element(document.getElementsByClassName('filter')).prop('offsetTop');
  
              [.. more code ..]
  
          })
      }
  }]);
  </code></pre>
  
  <p>The problem is, none of those codes are working.
  Or it has an <code>undefined</code> value, or it returns a value of <code>0</code>, even when this element is on the <code>pageYoffset</code> with a value of 700.</p>
  
  <p>How can i get the offsetTop value of this element using pure <code>AngularJs</code> or vanilla Javascript? I just don't to load Jquery in the page to just use in this function.</p>