CSS 粘性定位语法
在 CSS 中，粘性定位是一种混合了相对定位和固定定位的定位方式。粘性定位的元素在滚动到指定值之前会表现得像相对定位元素，之后则表现为固定定位，就像是在页面中 “粘住” 一样。
在 CSS 中，我们可以使用 position: sticky; 来实现粘性定位。
语法：
position: sticky;
top: 数值;
bottom: 数值;
left: 数值;
right: 数值;说明：
粘性定位的元素会根据最近的滚动父元素来进行定位。我们可以通过 top、bottom、left 和 right 这 4 个属性来设置元素在何时变为固定定位。
需要注意的是，要使得粘性定位生效，我们必须指定 top、right、bottom 或 left 属性中的至少一个，且父元素的 overflow 属性值不能是 hidden 或 auto。
CSS 粘性定位示例
接下来，我们通过几个简单的例子来讲解 CSS 粘性定位是如何使用的。
示例 1：CSS 粘性定位的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
height: 200px;
line-height: 200px;
font-size: 30px;
text-align: center;
background-color: lightskyblue;
}
#sticky {
position: sticky;
top: 0;
background-color: hotpink;
padding: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<div>1</div>
<div id="sticky">sticky</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</body>
</html>页面效果如下图所示。
分析：
在默认情况下，所有 div 元素都在正常文档流中垂直放着。当我们从上到下滚动页面时，sticky 元素一开始会随着页面滚动。但是，当元素的顶部到达视口顶部时，它会 “粘” 在页面顶部（top: 0），而不会再随页面滚动。这就是 “粘性定位” 效果。
提示: 绿叶网的顶部导航的固定效果，也可以使用粘性定位（position: sticky;）来实现的。
示例 2：粘性侧边栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: flex; /* 使用 flexbox 布局 */
height: 1200px; /* 使容器足够高以产生滚动 */
}
.sidebar {
width: 150px;
background-color: #ff9800; /* 橙色背景 */
color: white;
padding: 15px;
position: sticky;
top: 20px; /* 当侧边栏顶部距离视口顶部 20px 时固定 */
align-self: flex-start; /* 防止侧边栏拉伸 */
}
.main-content {
flex-grow: 1; /* 主内容占据剩余空间 */
padding: 20px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<h3>粘性侧边栏</h3>
<ul>
<li>链接 1</li>
<li>链接 2</li>
<li>链接 3</li>
</ul>
</div>
<div class="main-content">
<h2>主内容区域</h2>
<p>向下滚动页面，观察侧边栏。</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
除了顶部，我们也可以使用粘性定位将元素固定在视口的底部、左侧或右侧。在这个例子中，侧边栏会随主内容一起滚动。当侧边栏的顶部距离视口顶部达到 20px 时，它会固定在这个位置，直到 container 容器滚出屏幕。
这个例子比较复杂，并且还使用到了 flex 布局。建议小伙伴们把基础打扎实了再来好好理解一下。
