Safe replacement method for jQuery.position() method that cannot obtain the value_jquery

Calling the jQuery.position() method will return the position relative to the parent element. The jQuery official documentation describes that it is different from the .offset() method. .offset() returns the position relative to the document, while .position() returns the position relative to the parent element.

But in fact, during use, we found that the value returned by .position() is often 0. But the fact is not 0. Especially in Google Chrome and IE browser. Firefox doesn't have this problem.

The reason is that taking Webkit-based browsers (Google Chrome and Safari browser) as an example, only when elements (images, flash, etc.) are fully loaded, the browser can access the height and width of these elements. Firefox can access these properties after the DOM is loaded, and it does not need to know the full size of the element. Not so with Google Chrome. Therefore, in browsers such as Google/IE, if you want to use .position() to get the offset of an element, the value you get is often the initial value: 0.

One remedy is to place your .position() call after the $(window).load() event fires, rather than after the $(document).ready event. But this method may not be reliable.

Another alternative is to use .offset() to convert:

Copy code The code is as follows:

jQuery.fn.aPosition = function() {
ThisLeft = this.offset().left;
ThisTop = this.offset().top;
ThisParent = this.parent();

parentLeft = thisParent.offset().left;
parentTop = thisParent.offset().top;

return {
           left: thisLeft-parentLeft,
         top: thisTop-parentTop
};
};

Although this generates redundant code, it is much more reliable and reassuring to use.