I know that background-attachment: fixed exits and the problem with mobile devices and how to solve those using stick. But I'm looking for a CSS solution for parallax scrolling where the background slightly shifts.
There are various CSS only solutions that work by setting the height of the parallax container to height: 100vh:
.parallax-container {
height: 100vh;
perspective: 300px;
}
And using something like transform: translateZ(-600px) scale(3); on the a parallax-layer to achive the shifting.
HTML
<body>
<header>
</header>
<main class="parallax-container">
<section>some content</section>
<div class="parallax-content">
<div class="parallax-layer-1"></div>
</div>
<section>some content</section>
</main>
</body>
While this itself works fine, I start to get problems when I want to apply position: sticky to the header, because height: 100vh on the .parallax-container container breaks the sticky behavior because now sticky thinks that parallax-container has only the height 100vh.
position: fixed won't work for the header if I don't know the actual height of the header.
I also could make .parallax-container scrollable and the body not scrollable, but then the scrollbar is below the header which is also annoying.
I know that I could solve that using JavaScript, but is there a CSS only way to have sticky header and a 3D parallax effect?