position: sticky 详解（防坑指南）

caikeal 发布于2019-08-29 11:25 / 2257人阅读

摘要：写这篇文章的原因是无论中文还是英文关于的文章，只是说了这个性感的新特性可以拿来用，简单写一个完事，并没有详细的解析它。属性效果的本意是粘糊糊的，但在中的表现更像是吸附。强调这一点是因为在实际使用中，碰到设置的时候元素停在某一个位置不动了。

写这篇文章的原因是无论中文还是英文关于 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 无效。行内 style 写有效。

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

inspired by
mdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111641.html

vue-sticky组件详解

摘要：但当该元素的位置移出设置的视图范围时，其定位效果将变成，并根据设置的等作为其定位参数。另外，笔者在网上找过相关的组件。面向人群急于使用组件的同学。若页面大小发现变化，原显示的位置可能与页面变化后的不一致。 sticky简介 sticky的本意是粘的，粘性的，使用其进行的布局被称为粘性布局。 sticky是position属性新推出的值，属于CSS3的新特性，常用与实现吸附效果。设置...

phodal 2019-08-23 12:13 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
前端学习资源

摘要：提供了完整的环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。 react 新特性 react16 Context 算法相关图解排序算法(二)之希尔排序微信小程序微信小程序组件化的解决方案移动端尺寸基本知识浏览器前端必读：浏览器内部工作原理浏览器缓存原理解读浏览器加载css和js及dom解析之间的关系浏览器缓存 CSS学习移动web开发布局入...

zhisheng 2019-08-20 13:33 评论0 收藏0
CSS基础篇--使用position:sticky 实现粘性布局

摘要：生效规则须指定或四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且和同时设置时，生效的优先级高，和同时设置时，的优先级高。设定为元素的任意父节点的属性必须是，否则不会生效。简介前面写了一篇文章讲解了position常用的几个属性：《CSS基础篇-- position属性讲解》一般都知道下面几个常用的： { position: static; position: r...

ybak 2019-08-30 13:52 评论0 收藏0