offset(). 위쪽 대 위쪽 윈도우의 오프셋

Question

그래서 내 웹 응용 프로그램의 요소를 반응 적으로 만들기 위해 javascript/jquery를 통해 일부 계산을 수행하려고합니다. 나는 object.offset().top을 사용함으로써 콘텐츠의 상단과 객체의 상단 사이의 픽셀 수를 얻을 수 있음을 이해합니다. 그러나 내 디자인의 일부는 특정 요소가 화면의 상단에 붙어있는 반면 나머지 요소는 스크롤되는 반면, object.offset().top은 동일한 방식으로 유용하지 않다는 점입니다.

내가 알고 싶은 점 : 내 개체와 사용자 화면 상단 사이의 거리를 결정하는 데 사용할 수있는 방법이 있습니까 (개체와 콘텐츠 사이가 아닌). 최신 버전의 Chrome을 사용하고 있습니다.

건배

Answer 1

방법 내 객체와 사용자의 화면 상단 사이의 거리를 결정하기 위해 사용할 수있다

예,이 - getBoundingClientRect :

반환 값은 읽기 전용 left, top,을 포함하는 TextRectangle 객체입니다. 테두리 상자를 픽셀 단위로 설명하는 속성은및 bottom입니다. . 상단과 왼쪽 내가 여기 (이상) 원유 예를 이루어 왼쪽 상단 뷰포트의 "

, http://jsfiddle.net/7ceL8p3s/을 기준으로합니다 -보기에 빨간색 상자를 스크롤하고 그것을 클릭 - 그것은 기록합니다 클릭 할 때마다 TextRectangle 개체가 콘솔에 표시되고 top 및 left 값이 뷰포트를 기준으로 표시됩니다. (jsfiddle 결과 프레임의 뷰포트는 - 전체 창에서 보려면 http://jsfiddle.net/7ceL8p3s/show/으로 이동하십시오.)

그리고 스크롤하면 상자가 상단 뷰포트 테두리의 부분적으로 보이지 않게되어 있으므로 그것의 아래 부분은 볼 수 있습니다, 당신은 부정적인 top 값을 얻을 것이다. (요소가 왼쪽에서 보이지 않게 스크롤 될 수있는 레이아웃이있는 경우 left에 대해서도 마찬가지입니다.)