Window.scrollY
The read-only **scrollY** property of the Window interface returns the number of pixels that the document is currently scrolled vertically.
Window.pageYOffset
The read-only Window property pageYOffset is an alias for scrollY; as such, it returns the number of pixels the document is currently scrolled along the vertical axis (that is, up or down) with a value of 0.0, indicating that the top edge of the Document is currently aligned with the top edge of the window’s content area.
Window.screenTop
=Window.screenY
The **Window.screenTop** read-only property returns the vertical distance, in CSS pixels, from the top border of the user’s browser viewport to the top side of the screen.
Element.scrollTop
The **Element.scrollTop** property gets or sets the number of pixels that an element’s content is scrolled vertically.
Element.clientTop
The width of the top border of an element in pixels. It is a read-only, integer property of element.
HTMLElement.offsetTop
The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.
Element offsetTop Property -w3c
The offsetTop property returns the top position (in pixels) relative to the top of the offsetParent element.
Element.scrollHeight
The Element.scrollHeight read-only property is a measurement of the height of an element’s content, including content not visible on the screen due to overflow.
Element.clientHeight
The **Element.clientHeight** read-only property is zero for elements with no CSS or inline layout boxes; otherwise, it’s the inner height of an element in pixels. It includes padding but excludes borders, margins, and horizontal scrollbars (if present).
Element.getBoundingClientRect()
The **Element.getBoundingClientRect()** method returns the size of an element and its position relative to the viewport.
HTML DOM clientHeight Property - w3c
same as Element.clientHeight
The clientHeight property returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.
HTML DOM offsetHeight Property -w3c
The offsetHeight property returns the viewable height of an element in pixels, including padding, border and scrollbar, but not the margin.
The .offset() method allows us to retrieve the current position of an element (specifically its border box, which excludes margins) 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 more useful.
.offset() returns an object containing the properties top and left.
jquery .position()
Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
區分一下scrollHeight, offsetHeight, clientHeight
關於top：
如果是一般的box-model，如果父容器和子容器都是relative
子容器的offsetTop = 子容器top + 子容器margin + 父容器padding
如果父容器是relative,子容器是absolute
子容器的offsetTop = 子容器top + 子容器margin
window.pageYOffset vs $(window).scrollTop()
others
$(document.body).offset()
document.body.clientHeight
document.body.offsetHeight
$(window).scrollTop()