16

I have a div with position "fixed" and I want to get the value of its position relative to the whole document while the user scrolls down the page.

So, lets say I place the div on (x=0,y=0) and then the user scrolls down a bit and now, relative to the document, the div is on (X=0,y=300). I want to get that information, I want to know the exact position of that div in every moment, again, relative to the whole document, not to the window or the browser.

I've tried many things but nothing seems to get what I'm trying to.

One of them is this code, which does not work in the case of a fixed div:

var position = $("#fixed").offset(); /*it gets the position of the div
                                     "fixed" relative to the document*/
$("#fixed").html(position.top);      /*it prints the obtained
                                     value on the div "fixed"*/

Here you can find the running code, and you can see that, when you scroll down, the value of the position of the div does not change.

If I am not wrong, the code should print a new value on the div everytime it changes its vertical position relative to the document. But it turns out that it does not happen.

SOLVED:

The question was solved by codef0rmer. I was missing to track the scrolling to refresh the value of the position of the fixed div. I was an idiot. So the final code works fine the way he wrote it:

$(function () {
    var position = $("#fixed").offset();
    $("#fixed").html(position.top);

    $(window).scroll(function () {
       var position = $("#fixed").offset();
        $("#fixed").html(position.top);
    });
})

And here you can see the running code.

Thank you everyone and specially to codef0rmer.

Community
  • 1
  • 1
m4rk
  • 175
  • 1
  • 1
  • 6
  • Came here to comment I had the exact same stupid mistake and this answer saved me valuable time. :D – Anwi77 Nov 03 '22 at 10:18

4 Answers4

15

you can use .offset() to get the current coordinates of the element relative to the document whereas .position() to get the current coordinates of an element relative to its offset parent.

codef0rmer
  • 10,284
  • 9
  • 53
  • 76
  • 1
    Thank you, although this answer is essentially the same as the previous one, and it does not work. I edited the question again adding a demo for you to see that it doesn't work. – m4rk Mar 02 '12 at 12:30
  • 1
    How would you expect the code to work without writing any code to track your scrolling? See: http://jsfiddle.net/kVJ4x/4/ – codef0rmer Mar 02 '12 at 13:10
  • Yes, I realized later on and I was thinking of that trying to refresh the value with "mousemove", an stupid thought bearing in mind that what I wanted was to trigger the action whenever the user scrolls down. Thank you, it works perfectly now, I'll post it. – m4rk Mar 02 '12 at 13:16
5

.offset() gives you the coordinates relative to the whole document.

The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is the more useful.

.offset() returns an object containing the properties top and left.

Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • 1
    helpful info... $("#").offset().left, $("#").offset().top – Tejasva Dhyani Mar 02 '12 at 04:10
  • 2
    Thank you, but as I said, I've tried many things within several hours and of course I read the jQuery api, which is what you quote. I edited my message including the method that you suggest, but it does not work. – m4rk Mar 02 '12 at 10:18
0

Unless you refresh the page and the scrollbar is at a different position at the moment it initialize.

Barry
  • 75
  • 5
0
($("div").offset().top - $(document).scrollTop())
David Buck
  • 3,752
  • 35
  • 31
  • 35
Luciano Prevedello
  • 1
  • 3
    Hi! Could you please expand on your answer? Just posting a piece of code doesn't bring much to the community imho – kunambi Apr 28 '20 at 00:26