Using jquery to get element's position relative to viewport

The easiest way to determine the size and position of an element is to call itsgetBoundingClientRect() method. This method returns element positions in viewport coordinates. It expects no arguments and returns an object withproperties left, right, top, and bottom. The left and top properties give the X and Ycoordinates of the upper-left corner of the element and the right and bottom propertiesgive the coordinates of the lower-right corner.

element.getBoundingClientRect(); // Get position in viewport coordinates

Supported everywhere.

Here are two functions to get the page height and the scroll amounts (x,y) without the use of the (bloated) dimensions plugin:

// getPageScroll() by quirksmode.comfunction getPageScroll() {    var xScroll, yScroll;    if (self.pageYOffset) {      yScroll = self.pageYOffset;      xScroll = self.pageXOffset;    } else if (document.documentElement && document.documentElement.scrollTop) {      yScroll = document.documentElement.scrollTop;      xScroll = document.documentElement.scrollLeft;    } else if (document.body) {// all other Explorers      yScroll = document.body.scrollTop;      xScroll = document.body.scrollLeft;    }    return new Array(xScroll,yScroll)}// Adapted from getPageSize() by quirksmode.comfunction getPageHeight() {    var windowHeight    if (self.innerHeight) { // all except Explorer      windowHeight = self.innerHeight;    } else if (document.documentElement && document.documentElement.clientHeight) {      windowHeight = document.documentElement.clientHeight;    } else if (document.body) { // other Explorers      windowHeight = document.body.clientHeight;    }    return windowHeight}

Look into the Dimensions plugin, specifically scrollTop()/scrollLeft(). Information can be found at http://api.jquery.com/scrollTop.