Question

请向下滚动我的小提琴。我底部有额外的空格，我不知道如何删除。如果我单击下一步向下滚动，布局就可以了。任何帮助，非常感谢

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变量，该变量包含视口的高度（正好是白色空间的高度）和所有5个内容块。如果您删除windowHeight（如下所示），则应修复您的问题。

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

以下是您更新的小提琴的链接：http://jsfiddle.net/cs1aobuk/1/

Answer 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

div的Jquery高度计算

2 个答案: