CSS中新增的position属性sticky的使用方法

在开发前端页面的时候，前端切图人员经常会遇到一类需求，如：在默认下导航在logo等内容下方，当网页向上滑动时，为了继续保持导航的导向功能，我们会将导航固定在浏览器视口顶部。在文章详情页中，也经常会见到，文章详情部分非常长，侧栏类型数目较少，为了防止在网页向上滑动时，侧栏滑出可视范围，造成视觉上的突兀，我们一般也会设置，让侧栏的某个部分，在滑动到顶部时，像position:fixed的效果一样，粘性固定在浏览器顶部。这种效果一般被前端开发者们成为粘性定位效果。

以前为了实现这种粘性定位效果，以往我们需要借助JS，监听页面的Scroll事件，再结合给需要粘性定位的元素增删position:fixed样式来实现。但是现在，CSS3新增的属性中有了一个position:sticky的属性，可以让我们在不使用js的情况下，能更轻松的实现这种粘性定位效果。

一、position: sticky 的使用

我们熟知的position的取值一般是：: absolute、relative、fixed。对于新增的sticky值，目前使用并不是很广泛。

其中：absolute、fixed为绝对元素定位，relative为相对元素定位，新增的sticky为粘性定位。

粘性定位可以理解为是相对元素定位和绝对元素定位的结合，在未超过一定阈值之前为相对元素定位，超过之后为绝对元素定位。这里的阈值，指的是其距离其父元素的距离达到设定的sticky粘性定位的要求时，比如top:0。如以下代码：

.box { position: sticky; top: 100px; }

当box元素距离视窗viewport顶部大于100px时，此时box元素的定位为相对定位（position: relative），当box元素距离视窗顶部等于100px时，box元素则会固定在视口顶部100px处（position: fixed）。这里的top:100px即为阈值。

如果存在其父元素时，如下代码：

<div class="outbox">
    <div class="box"></div>
</div>

此时，box元素的显示还取决于其父元素是否在视口内可见。如其父元素滑动出视口区域，则box元素也会一起滑出。（因为受父元素的影响，所以position: sticky并不能完全代替传统的JS实现，有时需要牺牲HTML代码结构。）

为了便于大家理解，可测试如下示例，HTML代码：

<div class="box box01">
    <h1>Box01</h1>
    <p>box01<br />box01<br />box01<br />box01<br />box01<br />box01</p>
</div>
<div class="box box02">
    <h1>Box02</h1>
    <p>box02<br />box02<br />box02<br />box02<br />box02<br />box02</p>
</div>
<div class="box box03">
    <h1>Box03</h1>
    <p>box03<br />box03<br />box03<br />box03<br />box03<br />box03</p>
</div>

CSS代码：

*{ margin: 0; padding: 0;}
body{ min-height: 5000px;}
.box{
    width: 300px; margin-bottom: 10px; margin-left: 100px; border: 1px solid red;
    h1{ width: 100%; line-height: 40px; background: #f90; color: #fff; position: sticky; top: 0;}
    p{ line-height: 30px; font-size: 16px;}
}

position:sticky粘性定位属性常见的应用场景还有按首字母分类的页面，当滚动区域为A字母开头的内容时，顶部显示标题A字母，当滚动B字母开头时的内容时，顶部显示B字母的标题，以此类推。以往这些效果我们都需要通过JS监听页面滚动才能实现。

二、position: sticky 使用的注意事项：

1、position: sticky 必须指定top、right、bottom、left四个值（即阈值）中的至少一个才能生效；

2、定义了属性为position: sticky的元素的上级元素，不可使用值为：hidden、auto、scroll的overflow属性。这些设置会抑制所有子元素的position: sticky行为。