如何让#preview的第一个子div在滚动表格时保持sticky粘性？

要让目标div在滚动表格时保持粘性，你需要调整以下几点：

• 给粘性元素添加定位锚点：position:sticky必须配合top（或left/right/bottom）属性使用，浏览器才能知道元素该粘在容器的哪个位置
• 处理父容器的滚动上下文：因为#preview设置了overflow:auto，粘性元素会相对于这个容器固定，而非整个视口
• 避免和表格表头重叠：表格的表头也设置了top:0，需要调整它的top值，避开第一个子div的高度

修改后的代码示例 #

<div id="preview" style="overflow:auto; height: 300px;"> <!-- 给容器设置固定高度，触发滚动 -->
    <div style="position: sticky; top: 0; background: white; z-index: 10;">
        <i class="far fa-frown"></i>
        <span id="message">This should be sticky</span>
    </div>
    <table style="width:100%;">
        <tr style="position:sticky; top: 30px; background: #f0f0f0;"> <!-- top值设为第一个子div的高度，避免重叠 -->
           <th>Company</th>
           <th>Contact</th>
           <th>Country</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <!-- 可添加更多表格行测试滚动效果 -->
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
    </table>
</div>

关键修改说明 #

1. 给#preview设置固定高度：只有容器有固定高度且内容超出时，overflow:auto才会生效，滚动行为才能触发粘性效果
2. 第一个子div添加top:0：指定元素粘在容器顶部；设置background:white防止表格内容滚动时穿透显示；z-index:10确保它在表格表头上方
3. 表格表头调整top值：设为第一个子div的实际高度（示例中假设为30px），避免两个粘性元素重叠

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