基本概念

sticky 的基本原理

sticky 定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

sticky 元素的工作方式

• 元素先按普通文档流定位

• 当页面滚动，元素将要移出视口时，如果Applied offset（例如top: 50px）还在其滚动父元素可视区域内，元素就会固定在这个位置

• 当滚动父元素完全滚出视口时，sticky元素会随之滚出

sticky 定位的关键点

• 需要指定 top、right、bottom 或 left 中的至少一个，才能粘性定位生效

• 粘性定位元素仅在其父元素内生效

• 父元素高度必须大于粘性定位元素，否则没有粘滞效果

• 如果多个粘性定位元素叠加，则按照DOM流中的顺序依次覆盖

与滚动的配合使用

• 确保 sticky 元素的父容器可滚动（设置 height 或 max-height，并使用 overflow: auto 或 overflow: scroll）

• 父容器不应该有 overflow: hidden，这会阻止 sticky 效果

• 如果想让 sticky 元素在整个页面滚动中生效，它的父容器应该是 body 或一个占满视口的元素

示例

这里是一个更复杂的例子，展示了多个 sticky 元素的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multiple Sticky Elements</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            height: 100vh;
            overflow-y: scroll;
        }
        .section {
            padding: 20px;
            border-bottom: 1px solid #ccc;
        }
        .sticky-header {
            position: sticky;
            top: 0;
            background-color: #f1f1f1;
            padding: 10px;
            z-index: 10;
        }
        .content {
            height: 500px;
            background-color: #e9e9e9;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="section">
            <div class="sticky-header">Section 1</div>
            <div class="content">Content for section 1</div>
        </div>
        <div class="section">
            <div class="sticky-header">Section 2</div>
            <div class="content">Content for section 2</div>
        </div>
        <div class="section">
            <div class="sticky-header">Section 3</div>
            <div class="content">Content for section 3</div>
        </div>
    </div>
</body>
</html>