divs的jquery高度计算答案

【问题标题】：Jquery height calculation of divsdivs的jquery高度计算
【发布时间】：2014-10-29 22:43:22
【问题描述】：

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

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) + '%'
        });

    }
}

【问题讨论】：

标签： javascript jquery html css height

【解决方案1】：

在底部添加空白的原因是因为您将 scroll-animate 和 scroll-animate-main 的高度设置为计算出的 heightDocument 变量，该变量包含视口的高度（确切地说是空白）和所有 5 个内容块。如果您删除windowHeight（如下所示），您的问题应该会得到解决。

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

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

【讨论】：

【解决方案2】：

从计算中删除windowHeight

之前：

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

之后：

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

DEMO

【讨论】：