Essa opção não depende do layout. Depende apenas que o seu menu
tenha apenas uma cor de fundo...
O macete aqui é desatachar o menu
da sua cor de fundo... Tipo assim, o menu
vai continuar fixo, mas com fundo transparente! O fundo na verdade é outra div
, essa div
por sua vez funciona como o main
e sobe no scroll. Assim o menu
sempre fica fixo, porém o "fundo todo" fica livre para subir revelando o footer
Veja como fica:
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;
}
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-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>
Opção dependendo do layout
Com CSS dependendo do design do seu layout vc pode criar um pseudo elemento que vai estar atachado no Main
e vai subi por cima do Menu
quando vc scrollar. Porém, o azul que vc vê cobrir o menu
não é o footer
, é esse elemento é o after
do main
subindo, dando a impressão que é o footer
aparecendo :)
Por isso fiz a observação dizendo que vai depender muito do design da sua página...
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>