We Keep Coding

Difference between $(this).position and getBoundingClientRect()

jQuery provide position function which has top and left value.
Either vanilla javascript has getBoundingClientRect()
I don't the difference between them.
When I checked, it's value difference.
getBoundingClientRect()
How can I convert jQuery's position to getBoundingClientRect.
As you see, x is 236, but left is 200.

jQuery .position() gets position relative to the parent.
From documentation: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
getBoundingClientRect - relative to the window.
From documentation: The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
The solution found here: Element's coordinates relative to its parent

pageY of scrolled element from mouseenter event?

I have a long, scrollable list in an absolutely positioned container in the middle of my page (I do know how far the container is offset from the top of the screen, and the overflow is hidden on all the key elements). Each li in the list has a mouseover event. The events I see have a pageY in it, but that's the mouse position, and thus varies if I enter the li from above vs below. I need a constant value to position something alongside.
I looked in the srcElement property but the offsetTop within that is several 1000s, which means it is not based on the viewable content but the scrolled content.
How can I get a constant value of a scrolled div relative to the window as whole?
Note I canNOT easily run other DOM requests.

You can use the offsetTop you mentioned and substract the current scrollYOffset which you can get using window.pageYOffset.
var y = srcElement.offsetTop - window.pageYOffset;

Get the current top position of an element

I need to get a position of an element on a page from the top of the element (div) to the current position of the top of the window. I DO NOT want the position relative to the top of the page (seems offset and position are doing this?)

get the offset of the parent element, then get the offset of the child element, then substract one from the other - boom you got the information you were looking for.

Try:
var top= $('#element').offset().top+ $(document).scrollTop();

use $(element).offset().top:
$(".element").offset().top;
and apply it to your page...
Good luck

Calculate element-position

I would like to calculate the vertical position of a <div> with jQuery.
How would I do this?
Here's an illustration describing what I mean:

I think you're looking for its offset from the top of the page, right?
$('#div').scrollTop();
If that's not it, maybe the offset would work:
$('#div').offset().top;
Okay, now that it needs to be relative to the parent, try this:
$('#div').position().top;

$('#innerDiv').position()
Get the current coordinates of the
first element in the set of matched
elements, relative to the offset
parent.
jQuery Manual for position()

I think you're looking for
$(elem).offset();
http://api.jquery.com/offset/
If you want it relative to it's container, then you're after http://api.jquery.com/position/ instead.

jQuery has several functions to help you find the offset that you are looking for.
var element = $("#your_element");
// Get the current coordinates of the first element in the set of matched elements, relative to the document.
element.offset()
// Get the closest ancestor element that is positioned.
element.offsetParent()
// Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
element.position()
// Get the current horizontal position of the scroll bar for the first element in the set of matched elements.
element.scrollLeft()
// Get the current vertical position of the scroll bar for the first element in the set of matched elements.
element.scrollTop()
For more information read about these at the jQuery offset api page.

I reckon that the jQuery API "position()" isn't what you are looking for, since it is defined as "the current position of an element relative to the offset parent" (basically it corresponds to element.offsetTop)
Therefore if you want the top position of the element relative to its parent (not necessary the offset parent), use this instead:
var top = (element.parentNode == element.offsetParent) ? element.offsetTop : element.offsetTop - element.parentNode.offsetTop;

How do I find the absolute position of an element using jQuery?

Is there a way of finding the absolute position of an element, i.e. relative to the start of the window, using jQuery?

.offset() will return the offset position of an element as a simple object, eg:
var position = $(element).offset(); // position = { left: 42, top: 567 }
You can use this return value to position other elements at the same spot:
$(anotherElement).css(position)

Note that $(element).offset() tells you the position of an element relative to the document. This works great in most circumstances, but in the case of position:fixed you can get unexpected results.
If your document is longer than the viewport and you have scrolled vertically toward the bottom of the document, then your position:fixed element's offset() value will be greater than the expected value by the amount you have scrolled.
If you are looking for a value relative to the viewport (window), rather than the document on a position:fixed element, you can subtract the document's scrollTop() value from the fixed element's offset().top value. Example: $("#el").offset().top - $(document).scrollTop()
If the position:fixed element's offset parent is the document, you want to read parseInt($.css('top')) instead.

In case the element is not visible $(element).offset(); and $(element).position(); retun 0 for both top and left instead of the elements real value.
i had to use
parseInt($(element).css("top"))
parseInt($(element).css("left"))
to return the needed information.
the element has position: absolute;.