0

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

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

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

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

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

4

2 回答 2

4

尝试

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);
});

这是更新的 jsfiddle。

逻辑很简单。

  1. 在页脚显示之前使用窗口的高度。
  2. 在页脚变得可见后使用页脚的顶部。
  3. [1]或[2]- 标题的高度 = 你的答案。
于 2013-08-02T11:14:12.097 回答
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/

于 2013-08-02T11:36:03.753 回答