Essa opção na depende do layout. Depende apenas que o seu menu tenha apenas uma cor de fundo...

O macete aqui é desatachar o menu do fundo do menu... 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*

Veja como fica:

<!-- 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: 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;
    }


<!-- language: lang-html -->

    <nav> MENU </nav>

    <div class="debugg"></div>

    <main> CONTEÚDO </main>

    <footer> RODAPÉ </footer>

<!-- end snippet -->

----------

**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...*

<!-- begin snippet: js hide: true 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 -->