parallax content offset relative to window instead of its parent

Question

I'm practicing parallax effect and I want to apply it in my page (if mastered). Inside each #wrap, I want the .bar to be immovable when the page is scrolled up and down so I set their position to fixed and changed the z-index to 0 to make the content below look like sliding up. The issue is, the .bars are sticking together and their offsets are relative to window, not to their #wraps, although the position is relative, so the result is the .bars stuck fixed in the middle of the window instead of inside their parents. Can someone help me fix this?

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

Try this:

$(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>