This option has the HTML structure a bit different from yours. And background is actually in main , done with linear-gradiente to "split" the layout into two columns. If the content of main does not occupy the entire screen, footer is displayed. But if the content is extensive the footer is only revealed when the content ends. For this I used heigth of main this way min-height: calc(100vh - 200px);
Here in Snippet does not look so cool because footer has just the height of the snippet , but will hardly have a situation that will buggar in> so, only if your menu is too long and the screen height too narrow.
To better understand the example: Display Full Screen to have a better result
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
footer {
z-index: -1;
width: 100%;
height: 200px;
background-image: url(https://www.placecage.com/200/200);
background-size: cover;
position: fixed;
bottom: 0;
}
main {
display: flex;
margin-bottom: 200px;
background-image: linear-gradient(to right, #ddd 0, #ddd 25%, #333 25%, #fff 26%, #fff 100%);
min-height: calc(100vh - 200px);
}
section {
margin-left: 25%;
height: 200vh;
}
nav {
width: 25%;
position: fixed;
}
<main>
<nav>
menu
</nav>
<section>
<h1>conteúdo</h1>
</section>
</main>
<footer>footer</footer>
This option does not depend on layout. It only depends if your menu has only one background color ...
The trick here is to undo%% of your background color ... So, menu will remain fixed, but with a transparent background! The background is actually another menu , this div in turn works like div and rises in scroll . Thus main is always fixed, but the "whole fund" is free to raise revealing menu .
But if the footer of the page is too large, the background will disappear behind the scroll . Then I indicate the second option that is below ... But you have some caveats that I will tell below.
OBS: You can make the shade with menu on linear gradiente to make the "shadow" and not a main on drop-shadow on menu . You can use the main property if you want to set the pseudo-background of background-attachment: fixed; when you do the scroll .
Here's how:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
text-align: center;
}
nav {
z-index: 2;
width: 25%;
height: 100vh;
background-color: transparent;
position: fixed;
}
.debugg {
z-index: 1;
width: 25%;
margin-left: 0;
height: 100vh;
/* background-color: red; */
margin-bottom: 200px;
float: left;
background-image: url(https://placecage.com/200/600);
background-size: cover;
background-attachment: fixed;
}
main {
z-index: 1;
width: 75%;
margin-left: 25%;
height: 100vh;
margin-bottom: 200px;
background-image: linear-gradient(to right, #999 0, #ddd 16px, #ddd 100%);
}
footer {
z-index: -1;
width: 100%;
height: 200px;
background-image: url(https://placecage.com/500/200);
background-size: cover;
position: fixed;
bottom: 0;
}
<nav> MENU </nav>
<div class="debugg"></div>
<main> CONTEÚDO </main>
<footer> RODAPÉ </footer>
Option depending on the layout
With CSS depending on your layout design you can create a pseudo element that will be attached in menu and go up % of% when you scroll . But the blue that you see covers Main is not Menu , this element is menu footer rising, giving the impression that it is after appearing :)
So I made the remark saying that it will depend a lot on the design of your page ...
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
text-align: center;
}
nav {
z-index: 2;
width: 25%;
height: 100vh;
background-color: red;
position: fixed;
}
main {
z-index: 1;
width: 75%;
margin-left: 25%;
height: 100vh;
background-color: green;
margin-bottom: 200px;
}
footer {
z-index: -1;
width: 100%;
height: 200px;
background-color: blue;
position: fixed;
bottom: 0;
}
main::after {
content: "";
z-index: 20;
width: 25%;
height: 200px;
background-color: blue;
position: absolute;
left: 0;
top: 100%;
}
<nav> MENU </nav>
<main> CONTEÚDO </main>
<footer> RODAPÉ </footer>
