Determine distance from the top of a div to top of window with javascript

Question

How do I determine the distance between the very top of a div to the top of the current screen   I just want the pixel distance to the top of the current screen  not the top of the document   I ve tried a few things like  offset   and  offsetHeight  but I just can t wrap my brain around it   Thanks

User · Accepted Answer

You can use  offset   to get the offset compared to the document element and then use the scrollTop property of the window element to find how far down the page the user has scrolled   var scrollTop         window  scrollTop        elementOffset       my-element   offset   top      distance         elementOffset - scrollTop     The distance variable now holds the distance from the top of the  my-element element and the top-fold   Here is a demo  http   jsfiddle net Rxs2m   Note that negative values mean that the element is above the top-fold

User · Answer

I used this function to detect if the element is visible in view port  Code   const vh   Math max document documentElement clientHeight    0  window innerHeight    0     window  scroll function    var scrollTop         window  scrollTop    elementOffset       for-scroll   offset   top  distance         elementOffset - scrollTop   if distance  lt  vh       console log  in view      else      console log  not in view

User · Answer

Vanilla   window addEventListener  scroll   function ev        var someDiv   document getElementById  someDiv       var distanceToTop   someDiv getBoundingClientRect   top      console log distanceToTop         Open your browser console and scroll your page to see the distance

User · Answer

This can be achieved purely with JavaScript   I see the answer I wanted to write has been answered by lynx in comments to the question    But I m going to write answer anyway because just like me  people sometimes forget to read the comments   So  if you just want to get an element s distance  in Pixels  from the top of your screen window  here is what you need to do      Fetch the element var el   document getElementById  someElement        use getBoundingClientRect        Use the  top  property of  getBoundingClientRect    to get the distance from top var distanceFromTop   el getBoundingClientRect   top     Thats it    Hope this helps someone

User · Answer

I used this                                 myElement   document getElemenById  xyz    Get Offset From Start         myElement        returns positions from website s start position Get Offset From CurrentView   myElement        returns positions from current scrolled view s TOP and LEFT   code   function Get Offset From Start  object  offset         offset   offset     x   0  y   0       offset x    object offsetLeft        offset y    object offsetTop      if object offsetParent            offset   Get Offset From Start  object offsetParent  offset             return offset     function Get Offset From CurrentView  myElement        if   myElement  return      var offset   Get Offset From Start  myElement       var scrolled   GetScrolled  myElement parentNode       var posX   offset x - scrolled x    var posY   offset y - scrolled y      return  lefttt  posX   toppp  posY        helper function GetScrolled  object  scrolled        scrolled   scrolled     x   0  y   0       scrolled x    object scrollLeft     scrolled y    object scrollTop      if  object tagName toLowerCase        html   amp  amp  object parentNode    scrolled GetScrolled  object parentNode  scrolled         return scrolled                   live monitoring     window addEventListener  scroll   function  evt            var Positionsss    Get Offset From CurrentView myElement             console log Positionsss

[javascript] Determine distance from the top of a div to top of window with javascript

Examples related to javascript

Examples related to jquery