J'ai besoin de récupérer la hauteur visible d'un div dans une zone de défilement. Je me considère assez décent avec jQuery, mais cela me dérange complètement.
Disons que j'ai un div rouge dans un emballage noir:
Dans le graphique ci-dessus, la fonction jQuery renverrait 248, la partie visible du div.
Une fois que l'utilisateur fait défiler le haut du div, comme dans le graphique ci-dessus, il signale 296.
Maintenant, une fois que l'utilisateur a fait défiler le div, il signale à nouveau 248.
Évidemment, mes chiffres ne seront pas aussi cohérents et clairs que dans cette démo, ou je coderais simplement ces chiffres en dur.
J'ai un peu une théorie:
- Obtenez la hauteur de la fenêtre
- Obtenez la hauteur de la div
- Obtenez le décalage initial du div à partir du haut de la fenêtre
- Obtenez le décalage lorsque l'utilisateur fait défiler.
- Si le décalage est positif, cela signifie que le haut du div est toujours visible.
- s'il est négatif, le haut du div a été éclipsé par la fenêtre. À ce stade, le div pourrait occuper toute la hauteur de la fenêtre ou le bas du div pourrait afficher
- Si le bas du div s'affiche, déterminez l'écart entre celui-ci et le bas de la fenêtre.
Cela semble assez simple, mais je ne peux tout simplement pas comprendre. Je vais prendre une autre fissure demain matin; J'ai juste pensé que certains d'entre vous, les génies, pourraient peut-être aider.
Merci!
MISE À JOUR: J'ai compris cela par moi-même, mais il semble que l'une des réponses ci-dessous soit plus élégante, donc je vais l'utiliser à la place. Pour les curieux, voici ce que j'ai trouvé:
$(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);
}
}
});