sticky 的本意是粘糊糊的,但在 css 中的表现更像是吸附。**常见的吸顶、吸底(移动端网站的头部返回栏,底部切换栏之类)的效果用这个属性非常适合。**例如下图中的导航,也可以点链接看实际效果。
导航的效果更像是在页面打开的时候是 relative 的,向下滑动的时候 fixed 并且 top:0 为零。
而 sticky 代码仅需要如下:
特性(坑)
- 1、sticky 不会触发 BFC。如果不知道 BFC 可以看这里
- 样式表 z-index 无效。行内 style 写有效。
- sticky 是容器相关的,也就说 sticky 的特性只会在他所处的容器里生效。强调这一点是因为在实际使用中,碰到 body 设置 height:100% 的时候 sticky 元素停在某一个位置不动了。