position: sticky;
sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。特别适合导航的跟随定位效果。
基本上，可以看出是position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。

特性

position:sticky有个非常重要的特性，那就是sticky元素效果完全受制于父级元素们。
这和position:fixed定位有着根本性的不同，fixed元素直抵页面根元素，其他父元素对其left/top定位无法限制。

sticky元素以下一些特性表现：
父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果。
因为改变了滚动容器（即使没有出现滚动条）。
因此，如果你的position:sticky无效，看看是不是某一个祖先元素设置了overflow:hidden，移除之即可。

父级元素也不能设置固定的height高度值，否则也没有粘滞效果。
同一个父容器中的sticky元素，如果定位值相等，则会重叠；
如果属于不同父元素，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。
sticky定位，不仅可以设置top，基于滚动容器上边缘定位；
还可以设置bottom，也就是相对底部粘滞。如果是水平滚动，也可以设置left和right值。

sticky-粘性布局相关推荐

position:sticky；粘性布局
生效规则 position:sticky 的生效是有一定的限制的,总结如下: 须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效.否则其行为与相对定位相同 ...
反编译简书app和小红书app滑动效果sticky粘性头布局的实现CoordinatorLayout+behavior
反编译简书app和小红书app滑动效果sticky粘性头布局的实现CoordinatorLayout+behavior 小红书效果: 简书效果: demo效果图: github地址:https://g ...
android 模拟滑动app,反编译简书app和小红书app滑动效果sticky粘性头布局的实现CoordinatorLayout+behavior...
反编译简书app和小红书app滑动效果sticky粘性头布局的实现CoordinatorLayout+behavior 小红书效果: xiaohongshuu.gif 简书效果: jianshug.g ...
css 粘性布局吸顶position:sticky与js监听滚动手动实现
一.粘性布局吸顶position:sticky. CSS3新发布的一个属性position:sticky,当节点出现在可视窗口时,该节点的位置不受任何影响,也就是等于position:static定位 ...
[html] 你知道什么是粘性布局吗？
[html] 你知道什么是粘性布局吗? MDN 是这样解释的:Sticky positioning can be thought of as a hybrid of relative and fixe ...
elementplus中表格组件使用固定列时出现滚动条粘性布局固定表头
效果图如上, 因为项目经理希望竖向滚动条永远在最外面,所以通过粘性布局实现表头固定: 由于列数过多,固定多选框列和操作列时发现出现了滚动条,看官网上的例子也有,通过检查元素发现是固定列的阴影(使用伪元 ...
[Vant] van-tabs标签页吸顶\/粘性布局在移动端适配上的一些尝试
官方文档地址: Vant Tab标签页文档示例问题描述在开发中使用Vant标签页van-tabs组件时,遇到了一个关于标签页的粘性布局的屏幕适配问题. 原因是van-tabs的offset-top ...
position:sticky粘性定位的几种巧妙应用与理解。
一.粘性布局的定义 position:sticky又称为粘性定位,是css3新增的.粘性定位的元素依赖于用户的滚动,在相对定位(relative)与固定定位(fixed)之间进行切换,基于位偏移的值进 ...
html footer 布局,详解CSS经典布局之Sticky footer布局
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内容区 ...
vant 动态粘性布局_CSS Viewport 单位，很多人还不知道使用它来快速布局！
**CSS Viewport units(视口单位)**在过去几年已经出现了,随着时间的推移,越来越多的开发人员开始使用它们.它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态 ...

sticky-粘性布局

特性

sticky-粘性布局相关推荐

最新文章

热门文章