天然吸顶效果之sticky属性

发表于 更新于 分类于 阅读次数：

元素吸顶效果很常见，最常见的实现方式莫过于通过 js 实现，但现如今我们有了更简便，更直接的方式来实现某元素吸顶效果，那就是使用 css3 中的 position: sticky 来实现。

效果

demo

具体实现

html结构

1
2
3
4
5
<div> this is a div </div>
<h3> this is a sticky h3 element </h3>
<p>
  this is a p
</p>

css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
html,body {
  margin: 0;
}

div,h3,p {
  text-align: center;
}

p {
  height: 2000px;
}

div {
  height: 50px;
}

h3 {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: aliceblue;
  /* 核心代码 */
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

如上代码所示，仅仅需要将 position 的属性设置为 sticky 并且使 top 是有值的，那么天然的吸顶效果瞬间达成。

sticky 说明

经测试总结，position: sticky 规则有如下特性：

  1. 该规则属性，相当于 position: relative 和 position: fixed 的结合体。
  2. 必须明确设置（top,right,bottom,left）其中一个值，否则无粘滞效果。例：top: 10px 表示元素产生粘滞效果时，距离顶部的距离。
  3. 父元素不能设置 overflow: hidden，否则无粘滞效果。
  4. 父级元素也不能设置固定的 height 高度值，否则也没有粘滞效果。
  5. 同一个父容器中的 sticky 元素，如果定位值相等，则会重叠；如果属于不同父元素，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。

可能还会有其他意想不到的效果，后续发现后再补充说明。