Html 子菜单不滚动时的粘贴位置

我正在使用bootstrap v-4 beta2，我想创建带有子菜单的粘性顶部菜单。在桌面上一切正常，但在手机上，当我点击打开子菜单时，我看不到整个子菜单，当我滚动整个网站时，却看不到菜单。我发现我必须用li.dropdown做一些事情——当我添加position absolute时，它变得有点凌乱，但我看到了菜单。但是我不能得到我应该做的。代码如下：

li.下拉菜单：悬停>.下拉菜单{
显示：块；
}
li.下拉列表{
位置：静态；
}
.多列{
宽度：100%；
}

博客
博客2
博客3
博客4

如果您希望导航汉堡按钮在滚动时“粘”在网站上，则需要将其定位为固定

编辑：我忘记了子菜单，但在启用移动模式的chrome devtools中，这很好用。单击子菜单打开菜单，然后再次单击，关闭它

li.下拉菜单：悬停>.下拉菜单{
显示：块；
}
li.下拉列表{
位置：静态；
}
.多列{
宽度：100%；
}
.身体{
高度：1000px；
}
.nav-wrapper.Stick-top{
位置：固定；
}

博客
博客2
博客3
博客4

请参阅以下解决方案：

当菜单打开时，我使用了几行jQuery将类添加到sticky div中

$(document).ready(function() {
            $('#navbarNav').on('shown.bs.collapse', function () {
                $('.nav-wrapper.sticky-top').addClass('menu-opened');
            });
            $('#navbarNav').on('hidden.bs.collapse', function () {
                $('.nav-wrapper.sticky-top').removeClass('menu-opened');
            });
        });

并删除了下拉菜单的位置绝对属性，并添加了滚动到sticky div

.nav-wrapper.sticky-top {
            position: fixed;
        }
        .nav-wrapper.sticky-top.menu-opened {
            overflow: scroll;
            height: 100vh;
        }
        .dropdown-menu {
            display: block;
            position: inherit;
        }

---

如果需要在内容内滚动子菜单，则需要指定

max height

和

overflow:scroll

您还需要在
下拉菜单多列
部分中将
col-md-3
更改为
col-lg-3

CSS

@media (max-width: 991px){
.multi-columns{
  max-height: 300px;
  overflow: auto;
     }
  }

演示片段：
li.下拉菜单：悬停>.下拉菜单{
显示：块；
}
li.下拉列表{
位置：静态；
}
.多列{
宽度：100%；
}
@介质（最大宽度：991px）{
.多列{
最大高度：300px；
溢出：自动；
}
}









博客
博客2
博客3
博客4


修复的问题是，如果菜单长度超过设备屏幕高度，它将被裁剪。我可以打开它，但无法滚动查看子菜单它是
位置：粘滞的还是
位置：修复的
？这是两种不同的定位属性，为了清晰起见，应该对它们进行区分。看起来你的问题还需要更多的风格规则来准确地再现问题，作为一个最小的完整的可验证的例子，请看：谢谢，我花了一段时间才有机会测试它，但它起作用了：）享受你的奖励：谢谢你的奖励人。如果您遇到任何问题，请告诉我：）。