Javascript 我有一个视差效果的Js代码问题

我正在尝试制作一个视差效果，登陆页面图像保持静止，然后下面的正文段落出现在图像上方。我有它的作品，但图像仍在移动，然后一个空白显示在顶部

js:

再次感谢您的帮助

$('header').css({
    'height' : windowHeight + 'px',
    'line-height' : windowHeight + 'px'
});


scrollFooter(window.scrollY, footerHeight);

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

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

    $('header').css({
        'background-position-y' : 50 - (scroll * 400 / heightDocument) + '%'
    });

    scrollFooter(scroll, footerHeight);
}
});

---

实际上，您不需要使用JQuery在HTML页面上执行视差效果。简单的CSS可以满足您的需要

.parallaxEffect {
background-color: //color you wanted or use background-image: url(your link);
height: //your height
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed; //fixed the pic do not change to relative otherwise the effect will lost
width: 100%;}

.parallaxTitle { //remove if you don't need to put title inside your image
font-size: 80px;
color: #eee;
margin-top: 10%;
text-align: center;}     

.yourContent {
max-width: 100%;
position: relative;
top: 400px;
padding: 0px;
font-size: 20px;
background-color: #fff;}

你只需要将下面的内容应用到你的网站上，你就可以做一些预先的修改来满足你的要求

.parallaxEffect {
background-color: //color you wanted or use background-image: url(your link);
height: //your height
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed; //fixed the pic do not change to relative otherwise the effect will lost
width: 100%;}

.parallaxTitle { //remove if you don't need to put title inside your image
font-size: 80px;
color: #eee;
margin-top: 10%;
text-align: center;}     

.yourContent {
max-width: 100%;
position: relative;
top: 400px;
padding: 0px;
font-size: 20px;
background-color: #fff;}