요소의 정확한 좌표 가져오기

var getCoords = function(el){
	var box = el.getBoundingClientRect(),
		doc = elem.ownerDocument,
		html = doc.documentElement;
		body = doc.body,
		win = getWindow(doc),
		clientTop  = html.clientTop  || body.clientTop  || 0,
		clientLeft = html.clientLeft || body.clientLeft || 0,
		scrollTop  = win.pageYOffset || html.scrollTop  || body.scrollTop,
		scrollLeft = win.pageXOffset || html.scrollLeft || body.scrollLeft,
		top  = box.top  + scrollTop  - clientTop,
		left = box.left + scrollLeft - clientLeft;

	return { top: top, left: left };
}
function getWindow( el ) {
	return isWindow( el ) ?
			el :
			el.nodeType === 9 ?
				el.defaultView || el.parentWindow :
				false;
}
function isWindow( obj ) {
	return obj && typeof obj === 'object' && 'setInterval' in obj;
}

요약:
window.pageYOffset
IE가 아닌 동쪽, 그리고 IE의 문서.body.scrollTop은 매우 비슷하다. 이것은 우리가 본 웹 페이지의 맨 끝에서 사실상의 웹 페이지의 맨 끝까지의 거리이다. 예를 들어 수직 스크롤 줄이 나타나서 맨 아래로 끌면 우리가 본 것은 한 화면일 뿐이다. 이 화면의 높이는document이다.documentElement.clientHeight, 이때의 윈도우.페이지 YOffset은 바로parseFloat(window.getComputedStyle(document.documentElement,null)입니다.getPropertyValue('height')) - document.documentElement.clientHeight
clientTop, clientLeft
이 두 물건은 말하자면 위 테두리와 왼쪽 테두리의 너비 값이다