无法在固定标题内滚动移动下拉菜单

Question

所以我做了一个固定的下拉菜单，它变成了一个移动的汉堡菜单。在桌面上一切正常，但在移动设备上我无法滚动菜单项。我已经为此尝试了大量建议的修复程序，但没有一个可以解决我的问题。我遇到的大多数修复程序都包含以下某种形式，但没有奏效：

max-height: 300px;
overflow-y: scroll;

这是我现在拥有的小提琴：

https://jsfiddle.net/doitliketyler/2gqd0hLs/3/

黑色方块是移动汉堡按钮。有谁知道如何让它在移动设备上正确流畅地工作？任何帮助将不胜感激。非常感谢。

Answer 1

静态位置将阻止滚动。 因此，要解决此问题，您必须将菜单设置为类似于移动设备的相对位置。

因此，对于@media only screen and (max-width:960px)媒体查询中的.header选择器，将位置设置为相对。

@media only screen and (max-width: 960px) {
.header {
padding-bottom: 0;
position: relative;
}
}

编辑 1：要保留固定菜单，一种选择是将下拉部分设置为带有溢出 y 的绝对位置。

@media only screen and (max-width: 960px)
.header .header__column--navigation {
margin-top: 80px;
position: absolute; //Added
min-height: calc(100vh - 110px); //Added: set the second parameter of calc to the height of your header. ex: https://c.flm.pw/2018-06/6oiip.png
height: 100%; //Added: Tell the absolute div to take up as much height as it needs.
overflow-y: auto; //Added: Make the absolute div have the ability to scroll, but hide the scrollbar when it doesn't.
}
}