Question

我正在为我的新网站使用视差滚动，但是我已经发现内容滚动过去之后会出现大量空白空间。它滚过内容的底部，没有任何内容。

我认为这是因为脚本正在加速滚动，因为当我删除Parallax效果时，内容会停留在浏览器窗口的底部，就像它应该的那样。

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将它们向下推，以确保它们处于正确的位置。

使用视差滚动在内容下方的空白区域

1 个答案: