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...* <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> 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%; } <!-- language: lang-html --> <nav> MENU </nav> <main> CONTEÚDO </main> <footer> RODAPÉ </footer> <!-- end snippet -->