Using jquery to get element s position relative to viewport

Question

What s the proper way to get the position of an element on the page relative to the viewport  rather than the document   jQuery offset function seemed promising      Get the current coordinates of the first element  or set the   coordinates of every element  in the set of matched elements  relative   to the document    But that s relative to the document  Is there an equivalent method that returns offsets relative to the viewport

User · Answer

The easiest way to determine the size and position of an element is to call its getBoundingClientRect() method. This method returns element positions in viewport coordinates. It expects no arguments and returns an object with properties left, right, top, and bottom. The left and top properties give the X and Y coordinates of the upper-left corner of the element and the right and bottom properties give the coordinates of the lower-right corner.

element.getBoundingClientRect(); // Get position in viewport coordinates

Supported everywhere.

User · Answer

Here are two functions to get the page height and the scroll amounts  x y  without the use of the  bloated  dimensions plugin      getPageScroll   by quirksmode com function getPageScroll         var xScroll  yScroll      if  self pageYOffset          yScroll   self pageYOffset        xScroll   self pageXOffset        else if  document documentElement  amp  amp  document documentElement scrollTop          yScroll   document documentElement scrollTop        xScroll   document documentElement scrollLeft        else if  document body      all other Explorers       yScroll   document body scrollTop        xScroll   document body scrollLeft            return new Array xScroll yScroll        Adapted from getPageSize   by quirksmode com function getPageHeight         var windowHeight     if  self innerHeight       all except Explorer       windowHeight   self innerHeight        else if  document documentElement  amp  amp  document documentElement clientHeight          windowHeight   document documentElement clientHeight        else if  document body       other Explorers       windowHeight   document body clientHeight            return windowHeight

User · Answer

I found that the answer by cballou was no longer working in Firefox as of Jan  2014  Specifically  if  self pageYOffset  didn t trigger if the client had scrolled right  but not down - because 0 is a falsey number  This went undetected for a while because Firefox supported document body scrollLeft Top  but this is no longer working for me  on Firefox 26 0    Here s my modified solution   var getPageScroll   function document el  window el      var xScroll   0  yScroll   0    if  window el pageYOffset     undefined        yScroll   window el pageYOffset      xScroll   window el pageXOffset      else if  document el documentElement     undefined  amp  amp  document el documentElement scrollTop        yScroll   document el documentElement scrollTop      xScroll   document el documentElement scrollLeft      else if  document el body     undefined      all other Explorers     yScroll   document el body scrollTop      xScroll   document el body scrollLeft        return  xScroll yScroll        Tested and working in FF26  Chrome 31  IE11  Almost certainly works on older versions of all of them

User · Answer

jQuery offset needs to be combined with scrollTop and scrollLeft as shown in this diagram     Demo    x000D   x000D  function getViewportOffset  e    x000D    var  window     window   x000D      scrollLeft    window scrollLeft    x000D      scrollTop    window scrollTop    x000D      offset    e offset    x000D      rect1     x1  scrollLeft  y1  scrollTop  x2  scrollLeft    window width    y2  scrollTop    window height      x000D      rect2     x1  offset left  y1  offset top  x2  offset left    e width    y2  offset top    e height      x000D    return   x000D      left  offset left - scrollLeft  x000D      top  offset top - scrollTop  x000D      insideViewport  rect1 x1  lt  rect2 x2  amp  amp  rect1 x2  gt  rect2 x1  amp  amp  rect1 y1  lt  rect2 y2  amp  amp  rect1 y2  gt  rect2 y1 x000D       x000D    x000D    window  on  load scroll resize   function     x000D    var viewportOffset   getViewportOffset     element     x000D        log   text  left      viewportOffset left      top      viewportOffset top      insideViewport      viewportOffset insideViewport   x000D      x000D  body   margin  0  padding  0  width  1600px  height  2048px  background-color   CCCCCC    x000D   element   width  384px  height  384px  margin-top  1088px  margin-left  768px  background-color   99CCFF    x000D   log   position  fixed  left  0  top  0  font  medium monospace  background-color   EEE8AA    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   x000D   lt  -- scroll right and bottom to locate the blue square -- gt  x000D   lt div id  element  gt  lt  div gt  x000D   lt div id  log  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Look into the Dimensions plugin  specifically scrollTop   scrollLeft     Information can be found at http   api jquery com scrollTop

User · Answer

Here is a function that calculates the current position of an element within the viewport          Calculates the position of a given element within the viewport        param  string  obj jQuery object of the dom element to be monitored     return  array  An array containing both X and Y positions as a number    ranging from 0  under right of viewport  to 1  above left of viewport      function visibility obj        var winw   jQuery window  width    winh   jQuery window  height            elw   obj width    elh   obj height            o   obj 0  getBoundingClientRect            x1   o left - winw  x2   o left   elw          y1   o top - winh  y2   o top   elh       return           Math max 0  Math min  0 - x1     x2 - x1   1            Math max 0  Math min  0 - y1     y2 - y1   1              The return values are calculated like this     Usage   visibility     example         returns  0 3742887830933581  0 6103752759381899    Demo     x000D   x000D  function visibility obj   var winw   jQuery window  width   winh   jQuery window  height   elw   obj width    x000D      elh   obj height    o   obj 0  getBoundingClientRect   x1   o left - winw  x2   o left   elw  y1   o top - winh  y2   o top   elh  return  Math max 0  Math min  0 - x1     x2 - x1   1   Math max 0  Math min  0 - y1     y2 - y1   1     x000D    x000D  setInterval function     x000D    res   visibility     block     x000D        x   text Math round res 0    100          x000D        y   text Math round res 1    100          x000D     100   x000D   block   width  100px  height  100px  border  1px solid red  background  yellow  top  50   left  50   position  relative  x000D     container   background   EFF0F1  height  950px  width  1800px  margin-top  -40   margin-left  -40   overflow  scroll  position  relative  x000D     res   position  fixed  top  0  z-index  2  font-family  Verdana  background   c0c0c0  line-height   1em  padding  0  5em  font-size  12px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  res  gt  x000D     lt p gt X   lt span id  x  gt  lt  span gt  lt  p gt  x000D     lt p gt Y   lt span id  y  gt  lt  span gt  lt  p gt  x000D   lt  div gt  x000D   lt div id  container  gt  lt div id  block  gt  lt  div gt  lt  div gt  x000D   x000D   x000D

[javascript] Using jquery to get element's position relative to viewport

Examples related to javascript

Examples related to jquery

Examples related to position

Examples related to viewport

Examples related to offset