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

Question

请参考这个小提琴http://jsfiddle.net/abhicodes/LasxP/

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

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

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

所以，故事的寓意是，如果您考虑到这个小提琴，我想在滚动期间的任何给定实例中找出#content-wrapper 的高度对用户可见

Answer 1

以下将为您提供可见高度，并将变量分开，以便计算有意义：

$(document).on('scroll', function() {
    //Container
    var cont = $("#content-container");

    //Scroll Position (varies with scroll)
    var pageTop = $(document).scrollTop();
    //Visible Page Size (fixed)
    var pageSize = $(window).height();

    //Header Height (fixed)
    var headerHeight = $('#header').height();

    //Content top (fixed)
    var contTop = cont.offset().top;
    //Content top position (varies with scroll)
    var contTopPos = contTop - pageTop;
    //Content bottom (fixed)
    var contBottom =  cont.height() + contTop;
    //Content position in relation to screen top (varies with scroll)
    var contBottomPos = contBottom - pageTop;

    /*
        VISIBLE AREA
        Take the size of screen/page, unless the bottom of the content further up
            and subtract from it
        The header height, unless the top of the content is below the header
    */
    var visibleArea = Math.min(pageSize, contBottomPos) - Math.max( headerHeight, contTopPos);
});

示例：http://jsfiddle.net/asifrc/LasxP/8/

Answer 2

试试

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] - 标题的高度 = 你的答案。