Parallax scroll bar below fixed container - html

Question

I am trying to use the parallax effect on a site that has a fixed nav bar at the top of the page. Due to the way the parallax effect deals with overflows, the scroll bar appears to sit underneath the fixed nav bar at the top of the page.
I have included a fiddle to demonstrate this.
I have tried placing the fixed navbar div inside the parallax container. This moves the navbar beneath the scrollbar but also results in the navbar not fixing to the top of the page.
Here is my code so far...
HTML
<div class="navbar">NavBar</div>
<div class="parallax">
<div class="parallax_layer parallax_layer_back">
<img class="backgroundImage" src="https://images.pexels.com/photos/131212/pexels-photo-131212.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</div>
<div class="parallax_layer parallax_layer_base">
<div class="title">Title</div>
<div class="content">Content area</div>
</div>
</div>
CSS
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: initial;
perspective: 1px;
-webkit-perspective: 1px;
}
.parallax_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax_layer_base {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.parallax_layer_back {
transform: translateZ(-1px);
-webkit-transform: translateZ(-1px);
}
.parallax_layer_back { transform: translateZ(-1px) scale(2); }
.parallax_layer_deep { transform: translateZ(-2px) scale(3); }
/* Example CSS for content */
* {
margin: 0;
padding: 0;
}
.title {
position: absolute;
left: 10%;
top: 30%;
color: white;
font-size: 300%;
}
.backgroundImage {
width: 100%;
height: auto;
}
.content {
margin-top: 100vh;
width: 100%;
height: 800px;
background-color: #e67e22;
}
.navbar {width:100%; position: fixed; z-index: 999; background-color: red;}

Answer 1

Based on your source code, I have made a few changes. I'll explain step by step.
Assume that your NavBar's height is 50px, I lower .parallax class 50px down by using margin-top:50px;.
Also, we need to change your NavBar's position property from fixed to absolute.
Now there will be 2 scrollbar, one for the body and one for the .parallax contents. To hide the body's scrollbar, which is unnecessary, we can use overflow:hidden; for body tag.
This time, you will see that your NavBar won't cover the scrollbar, but the bottom of the scrollbar is unfortunately unseeable since the contents is shifted 50px from to top. To solve this I use a simple Jquery code to set .parallax height equal to the remaining window's height.
You can have a look at the snippet.
$(document).ready(function(){
$(".parallax").css("height",$(window).height()-50);
});
.parallax {
margin-top:50px;
overflow-x: hidden;
overflow-y: initial;
perspective: 1px;
-webkit-perspective: 1px;
}
.parallax_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax_layer_base {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.parallax_layer_back {
transform: translateZ(-1px);
-webkit-transform: translateZ(-1px);
}
/* Depth Correction */
.parallax_layer_back { transform: translateZ(-1px) scale(2); }
.parallax_layer_deep { transform: translateZ(-2px) scale(3); }
/* Example CSS for content */
* {
margin: 0;
padding: 0;
}
.title {
position: absolute;
left: 10%;
top: 30%;
color: white;
font-size: 300%;
}
.backgroundImage {
width: 100%;
height: auto;
}
.content {
margin-top: 100vh;
width: 100%;
height: 800px;
background-color: #e67e22;
}
.navbar {
width:100%;
position: absolute;
top:0;
z-index: 999;
background-color: red;
height:50px;
}
body{
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar"> NavBar </div>
<div class="parallax">
<div class="parallax_layer parallax_layer_back">
<img class="backgroundImage" src="https://images.pexels.com/photos/131212/pexels-photo-131212.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</div>
<div class="parallax_layer parallax_layer_base">
<div class="title">Title</div>
<div class="content">Content area</div>
</div>
</div>