0

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%);
}
jst16
  • 84
  • 9

1 Answers1

2

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>
ab29007
  • 7,611
  • 2
  • 17
  • 43
  • what I mean is for every fixed box (that has image-background), its contents/children are also fixed so it would appear that other colored boxes are sliding up when the window is scrolled down. that's what I'm trying to achieve – jst16 Dec 22 '16 at 11:55
  • Sorry I didn't get that completely. so you want the content on the pictures? or tell me what additional thing or improvement you want in my answer – ab29007 Dec 22 '16 at 11:58
  • from what I understood of your comment , I updated my answer. let me know if this is closer to your requirements then previous one. – ab29007 Dec 22 '16 at 12:14
  • Almost... except that when scrolling down, the text moves a bit upward. It should be immovable – jst16 Dec 22 '16 at 14:26
  • ok.Now it's not moving. perfect. and, can you please accept and upvote it. – ab29007 Dec 22 '16 at 14:38
  • Thanks a lot, appreciated it much :) – jst16 Dec 22 '16 at 15:01