title: How do I get the offset().top value of an element without using jQuery?
body: <p>I'm programming a single-page application using the Angular framework. I'm new to it. I've read <a href="https://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1">this guide</a> to help me understand the fundamental differences between jQuery and Angular and I'd like to follow this guidance as much as possible and NOT use jQuery.</p>
  
  <p>Except that jQuery helps get around some of the browser incompatibilities and provides a useful library of functions, like being able to know the top position of an element from the top of the window, as in <code>$('element').offset().top</code>. No plain Javascript seems to be able to come close without rewriting this function, at which point wouldn't it <em>be</em> a better idea to use a jQuery or jQuery like library?</p>
  
  <p>Specifically, what I'm trying to do is set up a directive that fixes an element in place once the top of it is scrolled to a certain position in the window. Here's what it looks like:</p>
  
  <pre><code>directives.scrollfix = function () {
      return {
          restrict: 'C',
          link: function (scope, element, $window) {
  
              var $page = angular.element(window)
              var $el   = element[0]
              var elScrollTopOriginal = $($el).offset().top - 40
  
              $page.bind('scroll', function () {
  
                  var windowScrollTop = $page[0].pageYOffset
                  var elScrollTop     = $($el).offset().top
  
                  if ( windowScrollTop &gt; elScrollTop - 40) {
                      elScrollTopOriginal = elScrollTop - 40
                      element.css('position', 'fixed').css('top', '40px').css('margin-left', '3px');
                  }
                  else if ( windowScrollTop &lt; elScrollTopOriginal) {
                      element.css('position', 'relative').css('top', '0').css('margin-left', '0');
                  }
              })
  
          }
      }
  }
  </code></pre>
  
  <p>If there's a much better way to achieve this in Angular that I'm still just not getting, I'd appreciate the advice.</p>