flex布局中position: sticky属性失效问题求助

前置问题排查 #

首先梳理你给出的配置中已存在的错误与缺失项，按优先级修复：

• 你配置的.left和.right设置的display: flexbox是非法属性值，flex布局的合法属性为display: flex/display: inline-flex，第一步需要修正该属性。
• position: sticky生效的基础前提是必须显式设置至少一个偏移属性：top/right/bottom/left，比如需要吸附在视口顶部就设置top: 0，该配置不能缺失。
• main设置了height: 100%但html、body未设置高度，百分比高度默认基于父元素计算，父元素无明确高度时该配置不生效，会导致内部flex子项高度计算异常。

完整修复步骤 #

1. 基础高度与默认样式重置 #

给html、body添加高度配置，保证后续百分比高度属性生效：

html, body {
  height: 100%;
  margin: 0;
}
.app {
  position: relative;
  height: 100%; /* 继承body高度，让main的height: 100%可正常计算 */
}

2. 修正flex相关配置 #

调整left、right的布局属性，保证left容器高度足够容纳sticky元素的滚动空间：

main {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: visible;
}
.left, .right {
  position: relative;
  display: flex; /* 修正原flexbox错误属性 */
  flex-direction: column; /* left内部元素为垂直排列，需设置纵向flex方向 */
}
.left {
  width: 300px; /* 按需调整左侧栏宽度 */
  overflow: visible; /* 必须保持overflow为visible，非visible值会直接导致sticky失效 */
}
.right {
  flex: 1;
  /* 此处设置超过视口的高度模拟长内容，实际替换为你的业务内容即可，保证页面可滚动触发sticky */
  height: 200vh;
}

3. 补全sticky元素的必要属性 #

.not-sticky {
  height: 200px; /* 按需调整非吸附块高度 */
}
.sticky {
  position: sticky;
  top: 0; /* 滚动到距离顶部0位置时开始吸附，按需调整偏移值 */
  height: 100px; /* 按需调整吸附块高度 */
}

注意：sticky元素的父容器（即.left）高度必须大于sticky元素自身高度，sticky元素只会在父容器的可视范围内吸附，父容器滚动出视口后sticky元素会跟着一起移出。

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