写这篇文章的原因是无论中文还是英文关于 sticky 的文章,只是说了 sticky 这个性感的 css 新特性可以拿来用,简单写一个 demo 完事,并没有详细的解析它。我希望这篇文章能帮助大家在使用 sticky 的时候更顺手。

属性效果

sticky 的本意是粘糊糊的,但在 css 中的表现更像是吸附。常见的吸顶、吸底(移动端网站的头部返回栏,底部切换栏之类)的效果用这个属性非常适合。例如下图中的导航,也可以点链接看实际效果。

导航的效果更像是在页面打开的时候是 relative 的,向下滑动的时候 fixed 并且 top:0 为零。

而 sticky 代码仅需要如下:

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

demo在这,请用 safari 看,幺蛾子的 chrome 需要开 flag 才能看,兼容性我会在后面提到。

兼容性


所以放心大胆的在 ios 上用吧。
polyfill

如果是检测浏览器是否支持 sticky 我更建议使用如下代码:

if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {
    // 支持 sticky
}

特性(坑)

1、sticky 不会触发 BFC。如果不知道 BFC 可以看这里

2、z-index 无效。

3、sticky 是容器相关的,也就说 sticky 的特性只会在他所处的容器里生效。这个比较抽象,demo 在这里,看完之后就懂了。强调这一点是因为在实际使用中,碰到 body 设置 height:100% 的时候 sticky 元素停在某一个位置不动了。

inspired by
mdn

你可能感兴趣的文章

小撸 · 2016年10月24日

这个好~

回复

俗尘大侠米 · 8月21日

z-index可以写在行内

回复

载入中...
flashback flashback

374 声望

发布于专栏

flashback

个人前端笔记

10 人关注