Get the position of a fixed div with jquery

Question

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.

Solution 1

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.

Solution 2

.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.

Comments

[Tejasva Dhyani]

helpful info... $("#<divId>").offset().left, $("#<divId>").offset().top

[m4rk]

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]

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.

[codef0rmer]

How would you expect the code to work without writing any code to track your scrolling? See: jsfiddle.net/kVJ4x/4

[m4rk]

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.

[kunambi]

Hi! Could you please expand on your answer? Just posting a piece of code doesn't bring much to the community imho