Leave fixed, without scroll a side menu mobile css

my problem is that, when using my page in a mobile resolution, I open the menu, and it does not stay fixed, that is, if I scroll, it takes me down the page, when what I'm looking for is the opposite . Also, I use a transparent background in the menu and if I scroll, in the background you can see that I'm still going down. I already tried with the overflow and could not solve it. I leave the code:

<nav class="menu">
<div class="container-menu">
    <div class="logo">
        <a href="index.php">
            <img src="../images/logo-sheltr.png">SHELTR
        </a>
    </div>
    <div class="icon-menu">
        <a href="#" id="btn-menu" class="btn-menu" >
            <span class="fa fa-bars"></span>        
        </a>

    </div>
</div>
<div class="menu-links">
    <ul>
        <li><a href="index.php">INICIO</a></li>
        <li><a href="conceptos.php">CONCEPTOS</a></li>
        <li><a href="se-parte.php">SÉ PARTE</a></li>
        <li><a href="inverti.php">INVERTÍ</a></li>
        <li><a href="prueba-piloto.php">PRUEBA PILOTO</a></li>
        <li><a href="contacto.php">CONTACTO</a></li>
    </ul>


</div>

and the css:

*{
    margin: 0;
    padding: 0;
}

/*MENU*/
header{
    font-family: helvetica;
    position: fixed;
    width: 100%;
}
.menu-links ul{
    height: 40px;
    display: flex;
    flex-direction: row;
}

/*MEDIQUERIES TABLET*/
@media screen and (max-width: 850px){
    .container-menu{
        height: 60px;
        display: flex;
        flex-direction: row;
        width: 80%;
        justify-content: space-between;
    }
    .menu-links{
        position: fixed;
        background: rgba(0,0,0,.7);
        height: 100vh;
        width: 100%;
        top: 60px;
        left: -100%;
        transition: .5s;
    }
    .menu-links ul{
        flex-direction: column;
        align-items: center;
        height: auto;
    }
}

I also thought about disabling the scroll with jquery or js, in each event that the menu opens. Thanks in advance. Greetings.