视差内容相对于窗口而不是其父级的偏移量

Question

我正在练习视差效果，我想在我的页面中应用它(如果掌握了)。在每个#wrap中，我希望页面上下滚动时.bar是不移动的，所以我将它们position设置为fixed并将z-index更改为 0，以使下面的内容看起来像向上滑动。问题是，.bars粘在一起，它们的偏移量是相对于窗口的，而不是相对于它们的#wraps，尽管position是relative的，所以结果是.bars固定在窗口中间而不是在它们的父母内部。有人可以帮我解决这个问题吗？

.HTML

<div class="wrap-1">
<div class="bar-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div style="height: 1000px;"></div> <!-- added for scrolling purposes -->
<div class="wrap-2">
<div class="bar-2">Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div style="height: 1000px;"></div> <!-- added for scrolling purposes -->

.CSS

div[class^='wrap'] {
width: 100%;
height: 100vh;
background-image: url("../assets/img/background/fence.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
div[class^='wrap'].wrap-1 {
background-image: url("/link/to/image-background.jpg");
}
div[class^='wrap'].wrap-2 {
background-image: url("/link/to/image-background.jpg");
}
div[class^='wrap'] div[class^='bar'] {
width: 100%;
height: 100px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 50%;
transform: translateY(-50%);
}

Answer 1

试试这个：

$(window).scroll(function(){
$("section div").each(function(){
$(this).css('margin-top',$(window).scrollTop()-$(this).parent().position().top);
console.log();
});
});

{
height:100%;
}
body,html, .wrapper, section{
height:100%;
margin:0;
padding:0;
}
section{
margin:0;
padding:20px;
overflow:hidden;
}
section div{
font-size:120px;
}
section div p{
font-size: 20px;
padding:0;
margin:0;
}
.wrapper #wrap1 {
background: url(http://p1.pichost.me/i/14/1375274.jpg) no-repeat fixed;
background-position: center center;
background-size:cover;
color:white;
}
.page-wrapper .wrapper #wrap1 .section-text1 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}
.wrapper #wrap2 {
background: url(http://www.topgear.com/india/images/stories/Car-Bike_topImages/bike.jpg) no-repeat fixed;
background-position: center center;
background-size:cover;
z-index: 3000;
}
.page-wrapper .wrapper #wrap2 .section-text2 {
position: fixed;
width: 300px;
margin: 0 auto;
padding-top: 100px;
background: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<section id="wrap1">
<div class="section-text1">
<p>Lorem ipsum"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</p>
</div>
</section>
<section id="wrap2">
<div class="section-text2">
<p>Lorem ipsum"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</p>
</div>
</section>
</div>