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 .bar
s are sticking together and their offsets are relative to window, not to their #wrap
s, although the position
is relative
, so the result is the .bar
s 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%);
}