flex-direction为column的flexbox布局内子元素sticky粘性定位失效如何解决

position: sticky 的粘性生效范围被严格限制在其直接父元素的高度区间内，你的场景下核心问题如下：

• 你给 <header> 设置了 height: 100vh，整个头部高度刚好占满一屏，导航栏作为 header 的子元素，最多只能在 header 仍处于视口范围内时维持粘性定位。当页面向下滚动，整个 header 会整体向上移出视口，导航栏也会跟着父元素一起滚走，无法实现永久吸附在视口顶部的效果。
• 另外需注意：所有包含导航栏的上层父元素不能设置 overflow: hidden、overflow: auto 这类属性，否则也会导致 sticky 定位失效。

方案1：调整DOM结构（更推荐） #

将导航栏 #navigation-wrapper 从 <header> 中移出，作为和 header 平级的独立元素，此时导航栏的父元素为页面滚动根容器（body/外层布局容器），只要父容器高度足够，粘性定位就会持续生效。
对应CSS只需补充层级设置避免被后续内容遮挡即可：

div#navigation-wrapper{
    position:sticky;
    top:0;
    z-index: 999; /* 确保导航栏在最上层 */
}

方案2：不修改DOM结构，调整CSS即可 #

如果不想改动现有HTML结构，可以修改header的高度配置，让导航栏的粘性生效范围覆盖全页面滚动区间：

header{
    /* 移除固定的height: 100vh */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
/* 让头部的logo等内容占满一屏高度，把导航栏挤到一屏底部 */
#quality-logos, #logo_motte_top {
    flex-grow: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
div#navigation-wrapper{
    position:sticky;
    top:0;
    z-index: 999;
    width: 100%;
}

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