I'm currently working on implementing a parallax header on my WordPress site using the Divi theme.
Below is the code I have so far:
<div class="parallax">
<div class="parralax__layer parallax__layer--back">
<img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
</div>>
<div class="parralax__layer parallax__layer--base">
<img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
</div>
</div>
For the CSS part:
.parallax {
perspective: 1px;
height: 25vh;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.parallax__layer {
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
transform-style: preserve-3d;
}
.parallax__layer--base {
transform: translateZ(-1px) scale(2);
}
.parallax__layer--back {
transform: translateZ(-15px) scale(2);
}
The issue I'm facing involves the header having a separate scroll bar, making it detached from the rest of the page. The parallax effect works fine with overflow set to 'auto', but disabling it breaks the effect.
How can I ensure that the header element scrolls along with the rest of the content while still maintaining 'overflow' as 'auto'?
You can view the problem in action here: