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

Question

所以我制作了一个固定的下拉菜单，该菜单更改为移动设备的汉堡菜单。在桌面上一切正常，但在移动设备上我无法滚动菜单项。我为此尝试了很多建议的修复方法，但没有一个能解决我的问题。我遇到的大多数修复都包含以下某种形式但没有奏效:

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

这是我现在拥有的 fiddle :

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

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

Answer 1

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

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

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

编辑 1:要保留固定菜单，一种选择是将下拉部分设置为带有 overflow-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.
    }
}