Css 侧面垂直菜单显示后始终保持在固定位置

我有一个侧菜单，当你点击一个图标时会出现。它从100%向左移动到70%，因此它变得可见。我的问题是，当我水平调整页面大小时，菜单会四处移动，我需要它始终位于相对于窗口的同一位置，但它必须是固定的，因为如果用户垂直滚动，我希望菜单中的元素保持可见

您可以在此处看到一个示例：

如果您将窗口大小调整为1250px，那么无论用户如何调整窗口大小，我都希望它保持不变

HTML

                <div class="nav-menu"> 
                    <ul>
                        <li class="list-item-main"> <span> <a href="#"> Sobre nosotros. </a> </span> </li>
                        <li class="list-item-main"> <span> <a href="#"> Real estate. </a> </span> 
                            <ul>
                                <li> <a href="#"> Oferta </a></li>
                                <li> <a href="#"> Venta </a> </li>
                                <li> <a href="#"> Colaboración </a> </li>
                            </ul>
                        </li>
                        <li class="list-item-main"> <span> <a href="#"> Consulting. </a></span> 
                            <ul>
                                <li> <a href="#"> Import/Export </a></li>
                            </ul>
                        </li>
                        <li class="list-item-main"> <span> <a href="#"> Contacto. </span> </a> </li>
                    </ul>
                </div>  

}

JS:

.nav-menu{
    position: fixed;
    left: 100%;
    height: 100vh;
    width: 430px;
    background: white;
    z-index: 400;
    top: 0%;
    padding: 160px 65px;
    transition: ease-in-out 500ms;
    transition-timing-function: cubic-bezier(0.42, 0, 0.43, 1.19);

$(".nav-hamburger").on("click", function(){

    if($(".nav-menu").hasClass("active-menu")){
      $(".nav-menu").css("left", "100%");
      $(".nav-menu").removeClass("active-menu");
      $(".cross-icon").fadeOut();
      $(".hamburger-icon").fadeIn();

    } else {


    $(".nav-menu").css("left", "70%");
    $(".nav-menu").addClass("active-menu");
    $(".hamburger-icon").fadeOut();
    $(".cross-icon").fadeIn();
  }

})

---

尝试改用

right:-430px

和

right:0

。使用%可能会导致浏览器每次都重新计算。在阅读此内容前5秒，我尝试正确：0，这就是我需要的。非常感谢。