可滚动page_body区域position:sticky元素顶部间隙滚动时漏出内容问题

你设置position: sticky的元素指定了top: 20px，代表元素粘滞时距离滚动容器.page_body的顶部保留20px空隙，这段空隙属于滚动容器的可视区域，滚动时下方内容自然会从这个区域穿过透出。

方案1：调整滚动容器内边距（推荐，无需额外DOM或伪元素） #

不通过sticky的top值留空隙，改为给滚动容器加顶部内边距，同时调整粘滞元素的top值为0，原有布局间距可通过调整下方边距保持不变：

修改的CSS代码： #

.page_body {
    overflow: auto;
    /* 原有padding为0 40px，新增顶部20px内边距 */
    padding: 20px 40px 0 40px;
    flex: 1 1 auto;
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
    font-size: 16px;
    line-height: 64px;
}

.margin_wrapper {
    /* 原有margin-top为48px，减去新增的20px内边距，保持总顶部间距不变 */
    margin-top: 28px;
}

.tbl_wrapper .tbl_action_panel {
    position: sticky;
    /* top值从20px改为0，直接粘在滚动容器顶部 */
    top: 0;
    background-color: inherit;
    z-index: 1;
    border-radius: 8px 8px 0 0;
    height: 60px;
    font-size: 20px;
    text-align: center;
}

这个方案不会破坏.tbl_wrapper原有的圆角、阴影、内边距等所有设计样式，顶部间隙效果和原有需求完全一致。

方案2：伪元素填补空隙（适合不想调整原有边距布局的场景） #

给粘滞元素添加一个和页面背景同色的伪元素，填补粘滞时顶部的空隙，挡住下方透出的内容：

新增的CSS代码： #

.tbl_wrapper .tbl_action_panel::before {
    content: '';
    position: absolute;
    /* 负值等于.tbl_wrapper的左右内边距，对齐容器左右边缘 */
    left: -150px;
    right: -150px;
    bottom: 100%;
    /* 高度和sticky的top值保持一致 */
    height: 20px;
    /* 和.page_body背景色一致 */
    background-color: #ECF0F4;
}

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