jquery - 使用视差滚动的内容下方的空白空间

Question

我正在为我的新网站使用视差滚动，但我发现内容滚动过去后有大量空白空间。它滚动到内容底部，但那里什么也没有。

我认为这是因为脚本正在加速滚动，因为当我删除视差效果时，内容会像预期的那样停在浏览器窗口的底部。

jQuery:

    $(document).ready(function() {
    /* Scroll event handler */
    $(window).bind('scroll',function(e){
        parallaxScroll();
    });
});

/* Scroll the background layers */
function parallaxScroll(){
    var scrolled = $(window).scrollTop();
    $('#Body_Background').css('top',(0-(scrolled*.3))+'px');
    $('#Home_WelcomeMessage').css('top',(0-(scrolled*.305))+'px');
    $('#Home_ContentBox2').css('top',(0-(scrolled*.605))+'px');
    $('#Home_ContentBox3').css('top',(0-(scrolled*.995))+'px');
}

CSS:

#Body_Background { z-index: 3; position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
#Body_Wrapper { position: relative; padding: 0; margin: 0; }
#Home_ContentBox1 { z-index: 5; position: relative; width: 100%; height: 950px; left: 0px; margin-top: 800px; padding: 0px; }
#Home_WelcomeMessage { z-index: 4; position: fixed; width: 100%; height: 400px; top: 0; margin-top: 400px; }
#Home_ContentBox2 { z-index: 5; position: relative; width: 100%; height: 800px; left: 0px; margin-top: 100px; padding: 0px; }
#Home_ContentBox3 { z-index: 5; position: relative; width: 100%; height: 1000px; left: 0px; margin-top: 0px;  padding: 0px; }

非常感谢任何帮助:)

Answer 1

我设法解决了这个问题。

对于以后遇到同样问题的人。我将 ContentBox1、2 和 3 div 设置为绝对定位而不是相对定位，然后使用 margin-top 将它们向下推以确保它们处于正确的位置。