用position: sticky 实现粘性元素区域悬浮效果(转)
用position: sticky 实现粘性元素区域悬浮效果
- 161
在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。
这个效果可以用position:sticky实现,设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。
代码如下:
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: sticky;
top: 60px; // 使用和 Fixed 同样的方式设定位置
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
页面效果如下:
可见机型模块固定显示在正常位置,
页面往下拉以后,机型固定悬浮在距离顶部导航60px的位置,相当与设置了:
position:fixed;
top:60px;
- 1
- 2
可以知道sticky属性有以下几个特点:
1.该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
2.当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。
3.元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量
用position: sticky 实现粘性元素区域悬浮效果(转)的更多相关文章
- 使用 position:sticky 实现粘性布局
如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...
- CSS使用position:sticky 实现粘性布局
简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...
- position:sticky 粘性定位的几种巧妙应用
背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...
- position:sticky
使用sticky定位可以简洁的实现固定功能 例如,左右布局页面,左侧菜单,右侧内容,内容区域滚动时,不希望菜单区域滚动,而是固定不动 以往要实现这个功能,需要使用fixed定位菜单,菜单脱离文档流,布 ...
- sticky,粘性定位
position:sticky,粘性定位:可以说是relative和fixed的结合: 滑动过程中,元素在显示窗口内则在其本身的位置,超出元素所在位置则显示在设定的sticky位置. 使用: #id ...
- position:sticky粘性布局
新的布局方式,专门用于 tab栏悬浮效果: 当tab栏在可视区域时,正常滚动, tab栏不再可视区域时,悬浮置顶. position:-webkit-sticky; position:sticky; ...
- 粘性固定属性 -- position:sticky
概述 position: sticky,这是一个比较容易忽略的css3 position 新属性,它的作用即为实现粘性布局,它是 relative 与 fixed 的结合. 用法 默认情况下,其表现为 ...
- 粘性固定 position:sticky
在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky,它是相对定位(position:relative)和固定定位(position ...
- position:sticky的兼容性尝试
开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...
随机推荐
- 51nod 1163 贪心
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1163 1163 最高的奖励 基准时间限制:1 秒 空间限制:131072 ...
- 计算机_软件技巧_01_优雅地再word中插入代码
二.参考资料 1.如何优雅的在 Microsoft word中插入代码
- 我的 Linux 配置
系统版本 Ubuntu 18.04 一名老年弱智 OI 选手的 Linux 配置 文本编辑器: Sublime Text 中文补丁,关闭自动补全,自动联想,括号匹配,字号 15 编译器: g++ (然 ...
- THUWC2017
100+20+20=140 还是很菜... T1 在美妙的数学王国中畅游 一棵树每个点有一个函数(sin,exp,一次函数),支持加边,删边,单点修改,查询一条路径在 $x$ 处的点值和 sol: 题 ...
- 【java规则引擎】简单规则的rete网络示意图
一个Fact通过Session添加到规则网络中,如何进行规则匹配的大致过程如下 (1)通过根结点对象从EntryPointNode的Map集合中找到相应的EntryPointNode对象 (2)Ent ...
- 2017/2/22怎么判断mongodb服务已经启动了?
打开任务管理器,看看服务下面是否有个MongoDB,有就表示成功
- 综述c++
1.背景 C语言作为结构化和模块化的语言,在处理较小规模的程序时,比较得心应手.但是当问题比较复杂,程序的规模较大时,需要高度的抽象和建模时,C语言显得力不从心. 2.应用领域 如果项目中,既要求效率 ...
- QAbstractSocket::connectToHost() called when already looking up or connecting/connected to
tcpSocket_connect_HBJ->abort();//取消已有连接,重置套接字,tcpSocket_connect_HBJ是QTcpSocket类的对象 就不会报错了.
- bzoj 2115 [Wc2011] Xor——路径和环的转化
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2115 思路很精妙.好像能应用到很多地方. 发现如果路径上有环,可以通过一些走法达到 异或了那 ...
- ECMAScript 2016(ES7) 知多少
ECMAScript 2016(ES7) 知多少 1. 数组方法 Array.prototype.includes(value : any) : boolean 2. 幂运算符 x ** y 扩展阅读 ...