Javascript 固定位置菜单，视口外的内容

我有一个导航菜单，它使用最小高度占据视口的全部高度，它也是固定位置，但这会带来一个问题

.menu{
   min-height:100vh;
   height:auto;
   position:fixed;
}

如果在小型浏览器窗口或分辨率（如mobile）中查看，菜单中的内容可以显示在比视口更低的位置，因此您无法看到最后的菜单选项

我正在寻找解决这个问题的最佳方法，无论是使用jQuery动态更改css位置（这似乎是WordPress管理菜单使用的解决方案），还是通过调整滚动条上的顶部或边距位置，如本例所示：

我想要相同的用户体验，因此元素的行为（或给人的印象）是拥有一个绝对位置，直到它的底端进入视图，然后它将成为固定位置

---

这些菜单非常常见，因此我相信有几种方法可以做到这一点。

您可以始终使用@media CSS规则，该规则将根据特定条件应用CSS属性。下面的示例将以浅蓝色显示屏幕大小为500px或更小的屏幕背景色

@media only screen and (max-width: 500px) {
body {
    background-color:lightblue;
}

}

你可以找到更多的细节