Question

请参阅此小提琴http://jsfiddle.net/abhicodes/LasxP/

这里我希望在每次滚动时找出#content-wrapper的可见高度。 #header将始终具有相同的高度并且它将被修复，但在我的某些页面中页脚高度不同，因此我无法将当前页脚高度作为标准。

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

假设我们位于页面底部且视口高度为600px，那么我想知道用户可以看到#content-wrapper的区域。因为在那个时候页脚也有其可容纳100像素和头可容纳80px，所以总可见光高度#content-wrapper将600-180 = 420PX并且类似地，如果我们在顶部然后页脚是不存在的，只是头是有，因此#content-wrapper的可见区域为520px。

所以，故事的道德是，我想在滚动期间找出任何给定的实例，如果考虑到这个小提琴，用户可以看到#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] - 标题的高度=您的答案。

Answer 2

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

$(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/

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

2 个答案: