2020-12-24

x
返回主页
ChokCoco经不住流年似水, 逃不过此间少年
博客园 首页 新随笔 联系 订阅 管理
探究 position-sticky 失效问题
CSS 的 position 值中，有一个非常有用的值 – position: sticky，通常会被用于各种吸顶，吸底，吸边的效果中。

如果你对 sticky 还不太熟悉，可以先看看我的这篇文章：使用 position:sticky 实现粘性布局，当然，这篇文章里面有稍微探讨 position: sticky 生效或者说失效的规则，但是不太充分。

最近遇到一些 position-sticky 失效的场景，所以总结了一下。

position-sticky 生效的原理
在 W3 官方文档中的定义是：Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport.

转换成通俗的大白话就是，Sticky 定位类似于相对定位，（当它表现为 fixed 定位的特性时）会根据最近的滚动容器（nearest scrollport）自动计算偏移量。

其中有一个非常重要的概念就是 nearest scrollport，它表示 sticky 元素在即将消失前会相对它最近的 scrollport 去做定位。

正常的 DEMO
所以正常而言，类似下面的这种情况，sticky 是可以正常展示的。

1
2

- 可滚动的容器 scrollport

- 设置了 sticky 的元素

CodePen Demo – Normal Sticky Demo

失效的 position: sticky
1、包裹的父容器高度与 sticky 元素一致

有趣的是，如果在 .sticky 元素和你希望 .sticky 生效吸附的滚动元素中间，添加上一层 .parent 的 div 元素，不给 div 添加任何样式，sticky 则失效了。

譬如是这样：

1
2
3

- 可滚动的容器 scrollport

- 设置了 sticky 的元素

CodePen Demo – invalid Sticky Demo 1

失效原因：此时 .sticky 元素的最近的 scrollport 变成了它的父容器 div，而父容器 div 的高度和 .sticky 元素的高度是一样的，所以表现不出 fixed 的特性。

其实，这里不算失效，我们只需要将包裹 .sticky 元素的父容器的高度设置的大于 .sticky 元素本身，也能看到效果。

譬如，我们可以加上

1
2
3
.parent {
height: 100vh;
}
此时，sticky 将重新生效，像是这样：

其实，造成这种现象的本质原因是，设置了 position: sticky 的元素吸附的基准元素从 .container 变成了 .parent 。

2、包裹的父容器设置了 overflow: hidden

第二种情况，也会导致 position: sticky 的 fixed 定位特性失效。也就是 .sticky 元素的祖先容器存在 overflow: hidden。类似这样

1
2
3

- 可滚动的容器 scrollport

- 设置了 overflow: hidden

- 设置了 sticky 的元素

CodePen Demo – invalid Sticky Demo 2

在上面这个 DEMO 里面，设置了 sticky 的元素的父元素 hidden 元素，它的高度是远比 stikcy 元素高的，但是滚动的过程中却没有表现出 fixed 的特性。

原因在于，设置了 overflow: hidden 的元素，它不再代用滚动的特性，当 sticky元素吸附于.hidden元素的顶部时，它随着 .hidden` 元素本身在 container 移动。所以，所有的 sticky 元素都会被滚动出 container 的滚动区域。

当然，这里有一点比较奇怪的是，.sticky 元素相对 .hidden 元素进行 fixed 定位，而不是相对 .container 元素进行 fixed 定位，表面设置了 overflow: hidden 的元素，它也是一个 scrollport。

其实，不止是 overflow: hidden ，设定为 position: sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。

总结一下
看完上面几个 DEMO，可以好好总结一下 position:sticky 的生效规则，明白了生效规则就会知道为什么有的时候设定的 sticky 会失效：

须指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；
并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高
设定为 position: sticky 的元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效；在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）
如果 position: sticky 元素的任意父节点定位设置为 position: overflow，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况
在满足上述情况下，设定了 position: sticky 的元素的父容器的高度必须大于当前元素，否则也会失效。（当然，此时，sticky 吸附的基准元素就会变成父元素）

最后
好了，本文到此结束。

更多精彩 CSS 技术文章汇总在我的 Github – iCSS ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

最后，新开通的公众号求关注，形式希望是更短的篇幅，质量更高一些的技巧类文章，包括但不局限于 CSS：

image

如果觉得文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打赏支持
分类: CSS进阶
好文要顶 关注我 收藏该文
ChokCoco
关注 - 53
粉丝 - 4551
推荐博客
+加关注
1 0
« 上一篇： 使用 tabindex 配合 focus-within 巧妙实现父选择器
posted @ 2020-12-23 18:50 ChokCoco 阅读(55) 评论(0) 编辑 收藏
刷新评论刷新页面返回顶部
登录后才能发表评论，立即 登录 或 注册， 访问 网站首页
写给园友们的一封求助信
【推荐】News: 大型组态、工控、仿真、CADGIS 50万行VC++源码免费下载
【推荐】有你助力，更好为你——博客园用户消费观调查，附带小惊喜！
【推荐】博客园x丝芙兰-圣诞特别活动：圣诞选礼，美力送递
【推荐】了不起的开发者，挡不住的华为，园子里的品牌专区
【福利】AWS携手博客园为开发者送免费套餐+50元京东E卡
【推荐】未知数的距离，毫秒间的传递，声网与你实时互动
【推荐】新一代 NoSQL 数据库，Aerospike专区新鲜入驻

相关博文：
· position:sticky防坑指南
· CSS布局：sticky定位
· leetcode35.SearchInsertPosition
· CSSposition定位
· nginx里的sticky的作用
» 更多推荐…

最新 IT 新闻:
· 红帽为CentOS的决定辩护 声称Stream版本可以覆盖当前95%的用户场景
· 美国宇航局可能已经捕捉到了太阳纳米耀斑的全生命周期
· 京东“京蜓”无人机在自贡成功首飞
· 《光环：士官长合集》开发商宣布加入腾讯：会变得更好
· 游族爆高层内斗CEO被投毒住院 警方通报来了：光速反转
» 更多新闻…
历史上的今天：
2019-12-23 巧用 CSS 实现酷炫的充电动画

我的Github

CSS灵感 – CSS效果大全

我的公众号 – iCSS前端趣闻

昵称： ChokCoco
园龄： 6年9个月
荣誉： 推荐博客
粉丝： 4551
关注： 53
+加关注
最新随笔

1.探究 position-sticky 失效问题
2.使用 tabindex 配合 focus-within 巧妙实现父选择器
3.CSS 技巧一则 – 不定宽溢出文本适配滚动
4.奇妙的 CSS MASK
5.巧用 display: contents 增强页面语义
6.巧妙实现带圆角的渐变边框
7.CSS 故障艺术
8.深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）
9.巧用 CSS 实现酷炫的充电动画
10.使用 sroll-snap-type 优化滚动
积分与排名

积分 - 325674
排名 - 1493
随笔分类 (225)

CSS进阶(70)
Encourage(1)
html,css,javascript(69)
Javascript(9)
Javascript&CSS3动画(25)
jQuery 源码分析(3)
nodeJS(1)
SVG(3)
编码技巧(12)
插件扩展(2)
代码规范(1)
计算机基础(3)
面试笔试(13)
前端安全(1)
前端框架类库(3)
更多
友情链接

Aaron
Vajoy
木的树
hoohack
韩子迟
邹成卓
cyfonly
练小习
李聪
前端路上
阅读排行榜

1. 【前端攻略】：玩转图片Base64编码(92515)

2. 【深入浅出jQuery】源码浅析–整体架构(86169)

3. 使用 position:sticky 实现粘性布局(69039)

4. 纯 CSS 实现波浪效果！(68167)

5. 【前端性能】高性能滚动 scroll 及页面渲染优化(66290)

6. 【前端攻略】最全面的水平垂直居中方案与flexbox布局(62534)

7. 跟着9张思维导图学习Javascript(49364)

8. 【nodeJS爬虫】前端爬虫系列 – 小爬「博客园」(48327)

9. 【CSS3进阶】酷炫的3D旋转透视(48154)

10. 【优雅代码】深入浅出 妙用Javascript中apply、call、bind(45037)

11. 两行 CSS 代码实现图片任意颜色赋色技术(42577)

12. 【前端安全】JavaScript防http劫持与XSS(41119)

13. BAT及各大互联网公司2014前端笔试面试题–JavaScript篇(38761)

14. BAT及各大互联网公司2014前端笔试面试题–Html,Css篇(36472)

15. 不受控制的 position:fixed(25816)
    评论排行榜

16. 跟着9张思维导图学习Javascript(85)

17. 【深入浅出jQuery】源码浅析–整体架构(81)

18. 【CSS进阶】伪元素的妙用–单标签之美(55)

19. 【BOOM】一款有趣的Javascript动画效果(53)

20. 清除页面广告？身为前端，自己做一款简易的chrome扩展吧(51)

21. 纯 CSS 实现波浪效果！(49)

22. 【前端性能】高性能滚动 scroll 及页面渲染优化(49)

23. 【前端攻略】：玩转图片Base64编码(46)

24. 【nodeJS爬虫】前端爬虫系列 – 小爬「博客园」(45)

25. 【优雅代码】深入浅出 妙用Javascript中apply、call、bind(44)
    推荐排行榜

26. 跟着9张思维导图学习Javascript(198)

27. 【深入浅出jQuery】源码浅析–整体架构(184)

28. 【CSS进阶】伪元素的妙用–单标签之美(137)

29. 【前端性能】高性能滚动 scroll 及页面渲染优化(135)

30. 纯 CSS 实现波浪效果！(128)
    Since 2016.05.25

Flag Counter
Others

QQ群：460065020
前端读书打卡交流群 >_<
Copyright © 2020 ChokCoco
Powered by .NET 5.0.1-servicing.20575.16 on Kubernetes
站长统计 | 今日IP[57] | 今日PV[66] | 昨日IP[1001] | 昨日PV[1269] | 当前在线[1]