How do I get the offset top value of an element without using jQuery

Question

I m programming a single-page application using the Angular framework  I m new to it  I ve read this guide 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   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    element   offset   top  No plain Javascript seems to be able to come close without rewriting this function  at which point wouldn t it be a better idea to use a jQuery or jQuery like library   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   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                                                          If there s a much better way to achieve this in Angular that I m still just not getting  I d appreciate the advice

User · Accepted Answer

use getBoundingClientRect if  el is the actual DOM object   var top    el getBoundingClientRect   top    JSFiddle   Fiddle will show that this will get the same value that jquery s offset top will give you  Edit  as mentioned in comments this does not account for scrolled content  below is the code that jQuery uses  https   github com jquery jquery blob master src offset js  5 13 2015   offset  function  options                    var docElem  win  rect  doc          elem   this  0         if    elem             return             rect   elem getBoundingClientRect            Make sure element is not hidden  display  none  or disconnected     if   rect width    rect height    elem getClientRects   length             doc   elem ownerDocument          win   getWindow  doc            docElem   doc documentElement           return               top  rect top   win pageYOffset - docElem clientTop              left  rect left   win pageXOffset - docElem clientLeft

User · Answer

Seems you can just use the prop method on the angular element   var top    el prop  offsetTop      Works for me  Does anyone know any downside to this

User · Answer

For Angular 2  to get the offset of the current element  this el nativeElement is equvalent of   this  in jquery    export class MyComponent implements  OnInit    constructor private el  ElementRef          ngOnInit             This is the important line you can use in your function in the code         --------------------------------------------------------------------------          let offset   this el nativeElement getBoundingClientRect   top          --------------------------------------------------------------------------              console log offset

User · Answer

Here is a function that will do it without jQuery   function getElementOffset element        var de   document documentElement      var box   element getBoundingClientRect        var top   box top   window pageYOffset - de clientTop      var left   box left   window pageXOffset - de clientLeft      return   top  top  left  left

User · Answer

the accepted solution by Patrick Evans doesn t take scrolling into account   i ve slightly changed his jsfiddle to demonstrate this    css  add some random height to make sure we got some space to scroll  body height 3000px      js  set some scroll position  jQuery window  scrollTop 100     as a result the two reported values differ now  http   jsfiddle net sNLMe 66   UPDATE Feb  14 2015  there is a pull request for jqLite waiting  including its own offset method  taking care of current scroll position   have a look at the source in case you want to implement it yourself  https   github com angular angular js pull 3799 files

User · Answer

You can try element 0  scrollTop  in my opinion this solution is faster    Here you have bigger example - http   cvmlrobotics blogspot de 2013 03 angularjs-get-element-offset-position html

[jquery] How do I get the offset().top value of an element without using jQuery?

Examples related to jquery

Examples related to angularjs

Examples related to window

Examples related to offset

Examples related to scrolltop