设置sticky粘性导航栏后滚动至页面底部下拉菜单无响应求助

问题原因 #

你遇到的下拉菜单滚动到底部失效的问题由3处CSS配置错误导致：

1. .navbar设置了overflow: hidden属性，该属性会裁剪所有超出导航条容器高度的内容，你的下拉菜单展开后高度高于导航条，默认就会被裁剪无法正常触发交互
2. .dropdown也额外设置了overflow: hidden，进一步限制了内部绝对定位的下拉菜单的展示和交互
3. sticky定位的外层容器.keepItTop没有设置z-index，滚动到页面底部时，后续的视频等内容层级会覆盖导航栏，导致hover、点击事件无法触达导航元素

修复方案 #

修改对应CSS规则即可：

/* 原.navbar规则去掉overflow: hidden，z-index移到外层keepItTop */
.navbar {
    background-color: #47494f;
}

/* 原keepItTop规则新增z-index */
.keepItTop {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 999;
}

/* 原.dropdown规则去掉overflow: hidden */
.dropdown {
  float: left;
}

修改完成后下拉菜单在任意滚动位置都可以正常触发，也不会出现被其他内容遮挡的问题。

内容的提问来源于stack exchange，提问作者Archibald