Make a div go beneath another one when scrolling - css

Question

I have the a page that looks like this:
What I want to do is that when I scroll the page, only the bottom half should move. I did it but because of the padding it makes it like this:
This is my css file:
.sites-list {
height: 40%;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 400px;
padding-left: 18rem;
padding-top: 5%;
background-color: #ffffff;
text-align: left;
font-size: 30px;
line-height: 40px;
color: #396aba;
}
When I inspect it in browser and uncheck top and padding-top it works fine:
How should I change it to make the white border be there if there is no scrolling but when I scroll to make the text go beneath the blue part as in the last picture?

Answer 1

I don't know exactly how your bars look like in CSS, but here is a working example that uses position: fixed.
.Bar {
position: fixed;
left: 0;
width: 100%;
height: 20vh;
z-index: 10;
background: #175f8f;
}
.Bar-top {
top: 0;
}
.Bar-bottom {
bottom: 0;
}
.Content {
position: relative;
z-index: 0;
padding-top: calc( 20vh + 100px ); /* set to the same height as the bar would be */
/* If you want to increase the padding and mix relative with absolute dimensions, use calc. Otherwise just add them up for a slightly better performance */
height: 2000px; /* we cheat a bit so we have something to scroll */
}
<div class="Bar Bar-top"></div>
<div class="Content">
Having your content here.
</div>
<div class="Bar Bar-bottom"></div>

Answer 2

You could set the blue bar to the following:
Position: fixed;
top: 0px;
z-index: 1;
And then set the element which you want the bar
to go over to:
z-index: 2;
This basically means that the blue bar is 'Fixed' to the top of the browser at all times. The nav element underneath it may require a margin-top of however tall the blue bar is to push it below the blue bar before it has been scrolled.