스크롤 가능한 영역 내에서 div의 보이는 높이를 검색해야합니다. 나는 jQuery에 대해 꽤 괜찮다고 생각하지만 이것은 나를 완전히 버리고 있습니다.
검은 색 래퍼 안에 빨간색 div가 있다고 가정 해 보겠습니다.
위의 그래픽에서 jQuery 함수는 div의 보이는 부분 인 248을 반환합니다.
위의 그래픽에서와 같이 사용자가 div의 맨 위로 스크롤하면 296이보고됩니다.
이제 사용자가 div를지나 스크롤하면 다시 248을보고합니다.
분명히 내 수치는이 데모 에서처럼 일관되고 명확하지 않을 것입니다. 아니면 그 수치에 대해 하드 코딩 할 것입니다.
나는 약간의 이론이 있습니다.
- 창 높이 가져 오기
- div의 높이 가져 오기
- 창 상단에서 div의 초기 오프셋 가져 오기
- 사용자가 스크롤 할 때 오프셋을 가져옵니다.
- 오프셋이 양수이면 div의 상단이 여전히 표시됨을 의미합니다.
- 음수이면 div의 상단이 창에 가려진 것입니다. 이 시점에서 div는 창의 전체 높이를 차지하거나 div의 하단에 표시 될 수 있습니다.
- div의 하단이 표시되면 창 하단과의 간격을 파악합니다.
매우 간단 해 보이지만 머리를 감쌀 수는 없습니다. 나는 내일 아침에 또 다른 균열을 가질 것입니다. 천재 여러분 중 일부가 도움을 줄 수 있다고 생각했습니다.
감사!
업데이트 : 나는 이것을 스스로 알아 냈지만 아래 답변 중 하나가 더 우아해 보이기 때문에 대신 사용할 것입니다. 궁금한 사람을 위해 여기에 내가 생각해 낸 것이 있습니다.
$(document).ready(function() {
var windowHeight = $(window).height();
var overviewHeight = $("#overview").height();
var overviewStaticTop = $("#overview").offset().top;
var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
var overviewStaticBottom = overviewStaticTop + $("#overview").height();
var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
var visibleArea;
if ((overviewHeight + overviewScrollTop) < windowHeight) {
// alert("bottom is showing!");
visibleArea = windowHeight - overviewScrollBottom;
// alert(visibleArea);
} else {
if (overviewScrollTop < 0) {
// alert("is full height");
visibleArea = windowHeight;
// alert(visibleArea);
} else {
// alert("top is showing");
visibleArea = windowHeight - overviewScrollTop;
// alert(visibleArea);
}
}
});