Parallax background with inside text - html

Question

I have parallax background that's moving at a certain speed with javascript. I need to put the text inside those background divs, so each background has its own text block. But when I put the text inside it goes to the top of the page, despite the container it's located. Something in the positions needs to change but I'm not sure what exactly. Any ideas?
HTML
<div id='hero'>
<div class='layer-bg layer' data-depth='0.10' data-type='parallax'>
<img class="logo" />
</div>
<div class='layer-1 layer' data-depth='0.20' data-type='parallax'>
</div>
<div class="relative">
<div class='layer-2 layer' data-depth='0.30' data-type='parallax'>
<div class="video">
Text
</div>
</div>
</div>
<div class='layer-3 layer' data-depth='0.40' data-type='parallax'></div>
</div>
<div id='hero-mobile'></div>
CSS
body {
padding: 0;
margin: 0;
background-color: $bronze;
font-family: 'Playfair Display', serif;
color: $white;
}
//
#hero {
height: $heroHeight;
overflow: hidden;
position: relative;
}
#content {
background-color: $bronze;
}
.layer {
background-position: bottom center;
background-size: auto;
background-repeat: no-repeat;
width: 100%;
height: $heroHeight;
position: fixed;
z-index: -1;
}
.first-section {
padding: 50px 0 20px 0;
}
.text-header {
font-size: 50px;
text-align: center;
}
h1 {
line-height: 120%;
margin-bottom: 30px;
}
p {
color: #ede0d5;
font-size: 18px;
line-height: 150%;
}
// #hero, .layer {
// min-height: 800px;
// }
.layer-bg {
background-image: url('');
height: 4000px!important;
background-position: top center;
width: 100%;
}
.layer-1 {
background-image: url('
');
height: 3000px;
}
.layer-2 {
background-image: url('');
height: 5500px;
}
.layer-3 {
background-image: url('
');
height: 8000px;
}
.layer-4 {
background-image: url('
');
background-position: center bottom;
}
.layer-overlay {
background-image: url('
');
}
.relative {
position: relative;
}
.logo {
margin: 0px auto;
max-width: 600px;
margin-top: 100px;
display: block;
}
JS
(function() {
window.addEventListener('scroll', function(event) {
var depth, i, layer, layers, len, movement, topDistance, translate3d;
topDistance = this.pageYOffset;
layers = document.querySelectorAll("[data-type='parallax']");
for (i = 0, len = layers.length; i < len; i++) {if (window.CP.shouldStopExecution(1)){break;}
layer = layers[i];
depth = layer.getAttribute('data-depth');
movement = -(topDistance * depth);
translate3d = 'translate3d(0, ' + movement + 'px, 0)';
layer.style['-webkit-transform'] = translate3d;
layer.style['-moz-transform'] = translate3d;
layer.style['-ms-transform'] = translate3d;
layer.style['-o-transform'] = translate3d;
layer.style.transform = translate3d;
}
window.CP.exitedLoop(1);
});
}).call(this);

Answer 1

I don't why you are using 8000px height in your CSS but
check the link may be it will be helpful for you
https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

Answer 2

Its because you fixed the position of every .layer class div that's why they all are in same position of your DOM.
And overflow: hidden; of your main div #hero
Solution
You have to remove fixed position of your .layer class and overflow: hidden;.
Example:- see fiddle