javascript - 滚动时查找 div 元素的可见高度

Question

请引用这个 fiddle http://jsfiddle.net/abhicodes/LasxP/

在这里，我想在每次滚动时找出 #content-wrapper 的可见高度。#header 将始终具有相同的高度并且它是固定的，但页脚高度在我的某些页面中是不同的，所以我不能将当前页脚高度作为标准。

如果我到达页面的末尾，那么大部分区域都被页脚覆盖，那么我也只想要 #content-wrapper 的可见部分，并且在滚动的其余部分发生同样的情况。对于页脚不可见的其余页面，我可以减去页眉高度以获得可见部分。

假设我们在页面底部，视口(viewport)高度为 600px，那么我想知道用户可以看到多少 #content-wrapper 区域。因为那时页脚也在那里容纳 100px 而页眉容纳 80px，所以 #content-wrapper 的总可见高度将是 600-180 = 420px 同样如果我们在顶部那么页脚不是那里只有标题，所以 #content-wrapper 的可见区域将为 520px。

所以，这个故事的寓意是，如果考虑到这个 fiddle ，我想知道在滚动期间的任何给定实例中，用户可以看到多少 #content-wrapper 的高度

Answer 1

尝试

var $win = $(window);
var $footer = $("#footer");
$(window).scroll(function(){
    var windowHeight = $win.height();
    var footerTop = $footer.offset().top - $win.scrollTop();
    var visibleHeight = Math.min(windowHeight, footerTop) - 80;
    console.log(windowHeight +", " + footerTop + ", " + visibleHeight);
});

Here is the updated jsfiddle .

---

逻辑很简单。

1. 在页脚显示之前使用窗口的高度。
2. 在页脚可见后使用页脚顶部。
3. [1] 或 [2] - header 的高度 = 您的答案。