单词sticky的中文意思是“粘性的”,当然他的特性也很符合他的名字。我们一般常用的position属性无非就是relative(相对定位)、absolute(绝对定位)、fixed(固定定位)。
- relative:生成相对定位的元素,相对于其正常位置进行定位。
- absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
- fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
而sticky可以看成是position:relative
和position:fixed
的结合体——当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。效果 请看这里。
HTML结构如下:
<article>
<div class="category">Category Header</div>
<h1 class="title">Article 1 Title</h1>
<p>Body content would go here.</p>
<!-- More Content -->
<div class="footer">
<p>Article 1 Footer</p>
</div>
</article>
<article>
<div class="category">Category Header</div>
<h1 class="title">Article 2 Title</h1>
<p>Body content would go here.</p>
<!-- More Content -->
<div class="footer">
<p>Article 2 Footer</p>
</div>
</article>
上面包含了两篇article,文章中包含一个Header、Title、content和footer。
CSS部分如下:
.category,.title,.footer {
position: -webkit-sticky; /* Required for Safari */
position: sticky;
height: 50px;
}
.category {
top: 0;
}
.title {
top: 0;
background: green;
margin: 0;
}
.footer {
bottom: 100px;
z-index: -1;
}
article {
background-image: linear-gradient(
to bottom,
transparent 50px,
#F5A623 50px,
#F5A623 calc(100% - 50px),
transparent 0
);
margin: auto auto 50px auto;
}
一、首先设置Header、Title和footer的定位为sticky,目前对于Safari浏览器需要使用-weikit-前缀做兼容处理
position: -webkit-sticky; /* Required for Safari */
position: sticky;
二、然后设置粘贴位置,是要注意以下几点
- 须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
- top和bottom同时设置时,top生效的优先级高,left和right同时设置时,left的优先级高。
- 设定为position:sticky元素的任意父节点的 overflow 属性必须是 visible,否则position:sticky不会生效
- 达到设定的阀值。也就是设定了position:sticky的元素表现为relative还是fixed是根据元素是否达到设定了的阈值决定的
- 父级元素也不能设置固定的
height
高度值,否则也没有粘滞效果(2019-05-22新增)
top: 0;
这里我们可以看到设置粘贴位置为顶部。
三、效果优化
为了达到案例中的效果,需要对article的属性进行一些设置
article {
background-image: linear-gradient(
to bottom,
transparent 50px,
#F5A623 50px,
#F5A623 calc(100% - 50px),
transparent 0
);
margin: auto auto 50px auto;
}
这里运用到了CSS3的线性渐变新特性,to bottom表示方向从上至下,transparent 50px表示前50px的区域使用透明色,calc(100% - 50px)这里的calc样式CSS3的一个新属性,可以用它来动态的计算宽高。
四、实际运用
在实际中我们可以在很多的地方用到它,我在我的个人博客中就是用到了这个特性,点击查看
后续我会在我的个人博客网站中使用更多的新特性,感兴趣的可以持续关注