相对于 window 而不是其 parent 的视差内容偏移

Question

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

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>

相对于 window 而不是其 parent 的视差内容偏移

parallax content offset relative to window instead of its parent

html

css

parallax