javascript - jquery计算div的高度

Question

请向下滚动我的 fiddle 。我在底部有一个额外的空白区域，我不知道如何删除。如果我通过单击 NEXT 向下滚动，则布局很好。非常感谢任何帮助

http://jsfiddle.net/cs1aobuk/

jS:

var lines = function () {
    $('div.section').css('height', $(window).height() + 'px');
}
lines();

$(window).resize(function () {
    lines();
    heightsCalculator();
});
heightsCalculator();

function heightsCalculator() {

    var windowHeight = ($(window).height()),
        heightDocument = (windowHeight) + ($('#one').height()) + ($('#two').height()) + ($('#three').height()) + ($('#four').height()) + ($('#five').height());

    $('#scroll-animate, #scroll-animate-main').css({
        'height': heightDocument + 'px'
    });

    window.onscroll = function () {
        var scroll = window.scrollY;

        $('#scroll-animate-main').css({
            'top': '-' + scroll + 'px'
        });

        $('#one').css({
            'background-position-y': 0 - (scroll * 100 / heightDocument) + '%'
        });

    }
}

Answer 1

在底部添加空白的原因是因为您将 scroll-animate 和 scroll-animate-main 的高度设置为您计算的 heightDocument 变量，其中包含视口(viewport)的高度(正好是空白的高度)和所有 5 个内容 block 。如果您删除 windowHeight(如下所示)，您的问题应该得到解决。

$('#scroll-animate, #scroll-animate-main').css({
    'height': (heightDocument - windowHeight) + 'px'
});

这是您更新的 Fiddle 的链接:http://jsfiddle.net/cs1aobuk/1/