Preciso recuperar a altura visível de um div em uma área de rolagem. Eu me considero bastante decente com o jQuery, mas isso está me deixando completamente louco.
Digamos que eu tenha um div vermelho dentro de um invólucro preto:
No gráfico acima, a função jQuery retornaria 248, a parte visível do div.
Assim que o usuário rolar para além do topo do div, como no gráfico acima, ele reportará 296.
Agora, depois que o usuário rolar para além do div, ele relatará novamente 248.
Obviamente, meus números não serão tão consistentes e claros como são nesta demonstração, ou eu apenas codificaria para esses números.
Eu tenho um pouco de teoria:
- Obtenha a altura da janela
- Obtenha a altura do div
- Obtenha o deslocamento inicial do div do topo da janela
- Obtenha o deslocamento conforme o usuário rola.
- Se o deslocamento for positivo, significa que o topo da div ainda está visível.
- se for negativo, a parte superior do div foi eclipsada pela janela. Neste ponto, o div pode estar ocupando toda a altura da janela ou a parte inferior do div pode estar sendo exibida
- Se a parte inferior da div estiver aparecendo, descubra a lacuna entre ela e a parte inferior da janela.
Parece muito simples, mas simplesmente não consigo entender isso. Vou tentar outra vez amanhã de manhã; Achei que alguns de vocês, gênios, poderiam ajudar.
Obrigado!
ATUALIZAÇÃO: descobri isso sozinho, mas parece que uma das respostas abaixo é mais elegante, então usarei isso. Para os curiosos, aqui está o que eu criei:
$(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);
}
}
});