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

Question

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

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

如果在小浏览器窗口或移动设备等分辨率下查看，菜单内的内容可以比视口更下方显示，因此您无法看到最后一个菜单选项。

我正在寻找最佳方法，无论是用jQuery动态改变css位置（这似乎是用于WordPress管理菜单的解决方案），还是通过调整滚动的顶部或边距位置，就像这样例如：

https://queen-theme.myshopify.com/

我希望获得相同的用户体验，因此元素会产生（或给出印象）具有绝对位置，直到它的底端进入视图，然后它将成为固定位置。

这些菜单很常见，所以我确定有几种方法可以做到这一点？

Answer 1

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

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

}

您可以找到更多详情here