offset().top is not working as expected in if parent element is fixed

Question

I am using position : fixed for a div for stick that div on top of the page, but when i use offset().top for its child value, it gives different values on scrolling. i tried like :

CSS :

.parent{
    position : fixed;
    top : 0px;
}
.child{
    height : 20px;
    margin-top : 10px;
}

JS :

console.log($(".child").offset().top);

the above JS code give different results when i scrolling the page.

Answer 1

Use .position() to get the current coordinates of an element relative to its offset parent. The .offset() method is gives you the coordinates relative to the entire document.

$(".child").position()