Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/73.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 视差滚动时背景图像移出容器_Jquery_Html_Css - Fatal编程技术网

Jquery 视差滚动时背景图像移出容器

Jquery 视差滚动时背景图像移出容器,jquery,html,css,Jquery,Html,Css,我有两个,我试图创建一个视差滚动效果。我对其中两个使用相同的代码来实现这个效果。对于第一个div来说,它工作得很好。但是,它给另一个div带来了麻烦,即背景图像正在移出div。下面是代码: HTML JQUERY 是否图像的高度不够大?但是,那么它在第一个div中运行良好吗?请帮忙!! 是当前仅基于窗口滚动顶部移动背景的链接 页面越往下走,对元素的影响就越大。您需要考虑包含元素的位置。在元素在视口中可见之前,不应开始移动背景图像。我要试试看!这很有帮助。 <div id="div1">

我有两个,我试图创建一个视差滚动效果。我对其中两个使用相同的代码来实现这个效果。对于第一个div来说,它工作得很好。但是,它给另一个div带来了麻烦,即背景图像正在移出div。下面是代码:

HTML

JQUERY

是否图像的高度不够大?但是,那么它在第一个div中运行良好吗?请帮忙!!
是当前仅基于窗口滚动顶部移动背景的链接


页面越往下走,对元素的影响就越大。您需要考虑包含元素的位置。在元素在视口中可见之前,不应开始移动背景图像。我要试试看!这很有帮助。
<div id="div1">Some Content</div>
<div id="div3">Some Content</div>
#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;
}
$(window).scroll(function () {
   var wScroll = $(window).scrollTop();

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