移动在视差滚动的容器外面的背景图象

时间:2017-12-20 18:05:30

标签: jquery html css

我有两个<div>,我试图创建一个视差滚动效果。我使用相同的代码,其中两个具有这种效果。对于第一个div,它工作得很好。然而,它正在给另一个div造成麻烦,即背景图像正在移出div。这是代码:

HTML

<div id="div1">Some Content</div>
<div id="div3">Some Content</div>

CSS

#div1{
    height: 100vh;
}
#div1,#div3 {
z-index: 1;
position: relative;
width: 100%;
background: url("img/img3.jpg");
background-position: 50% 0%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
}

#div3 {
padding: 80px;
color: white;
}

JQUERY

$(window).scroll(function () {
   var wScroll = $(window).scrollTop();

   $('#div1,#div3').css({
       'background-position-y':"-" + wScroll / 2 +'px'
   });
});

可能是图像的高度不够大吗?但是,它对第一个div工作正常吗?请帮忙!! Here是链接

1 个答案:

答案 0 :(得分:1)

目前,您仅根据窗口滚动顶部移动背景。

你走的页面越远,这将影响元素。你需要考虑包含元素的位置。你不应该开始移动背景图像,直到元素在视口中可见