用position: sticky 实现粘性元素区域悬浮效果

原创 2017年08月02日 20:04:13
  • 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 实现粘性元素区域悬浮效果(转)的更多相关文章

  1. 使用 position:sticky 实现粘性布局

    如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...

  2. CSS使用position:sticky 实现粘性布局

    简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...

  3. position:sticky 粘性定位的几种巧妙应用

    背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...

  4. position:sticky

    使用sticky定位可以简洁的实现固定功能 例如,左右布局页面,左侧菜单,右侧内容,内容区域滚动时,不希望菜单区域滚动,而是固定不动 以往要实现这个功能,需要使用fixed定位菜单,菜单脱离文档流,布 ...

  5. sticky,粘性定位

    position:sticky,粘性定位:可以说是relative和fixed的结合: 滑动过程中,元素在显示窗口内则在其本身的位置,超出元素所在位置则显示在设定的sticky位置. 使用: #id ...

  6. position:sticky粘性布局

    新的布局方式,专门用于 tab栏悬浮效果: 当tab栏在可视区域时,正常滚动, tab栏不再可视区域时,悬浮置顶. position:-webkit-sticky; position:sticky; ...

  7. 粘性固定属性 -- position:sticky

    概述 position: sticky,这是一个比较容易忽略的css3 position 新属性,它的作用即为实现粘性布局,它是 relative 与 fixed 的结合. 用法 默认情况下,其表现为 ...

  8. 粘性固定 position:sticky

    在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky,它是相对定位(position:relative)和固定定位(position ...

  9. position:sticky的兼容性尝试

    开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...

随机推荐

  1. 51nod 1163 贪心

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1163 1163 最高的奖励 基准时间限制:1 秒 空间限制:131072 ...

  2. 计算机_软件技巧_01_优雅地再word中插入代码

    二.参考资料 1.如何优雅的在 Microsoft word中插入代码

  3. 我的 Linux 配置

    系统版本 Ubuntu 18.04 一名老年弱智 OI 选手的 Linux 配置 文本编辑器: Sublime Text 中文补丁,关闭自动补全,自动联想,括号匹配,字号 15 编译器: g++ (然 ...

  4. THUWC2017

    100+20+20=140 还是很菜... T1 在美妙的数学王国中畅游 一棵树每个点有一个函数(sin,exp,一次函数),支持加边,删边,单点修改,查询一条路径在 $x$ 处的点值和 sol: 题 ...

  5. 【java规则引擎】简单规则的rete网络示意图

    一个Fact通过Session添加到规则网络中,如何进行规则匹配的大致过程如下 (1)通过根结点对象从EntryPointNode的Map集合中找到相应的EntryPointNode对象 (2)Ent ...

  6. 2017/2/22怎么判断mongodb服务已经启动了?

    打开任务管理器,看看服务下面是否有个MongoDB,有就表示成功

  7. 综述c++

    1.背景 C语言作为结构化和模块化的语言,在处理较小规模的程序时,比较得心应手.但是当问题比较复杂,程序的规模较大时,需要高度的抽象和建模时,C语言显得力不从心. 2.应用领域 如果项目中,既要求效率 ...

  8. QAbstractSocket::connectToHost() called when already looking up or connecting/connected to

    tcpSocket_connect_HBJ->abort();//取消已有连接,重置套接字,tcpSocket_connect_HBJ是QTcpSocket类的对象 就不会报错了.

  9. bzoj 2115 [Wc2011] Xor——路径和环的转化

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2115 思路很精妙.好像能应用到很多地方. 发现如果路径上有环,可以通过一些走法达到 异或了那 ...

  10. ECMAScript 2016(ES7) 知多少

    ECMAScript 2016(ES7) 知多少 1. 数组方法 Array.prototype.includes(value : any) : boolean 2. 幂运算符 x ** y 扩展阅读 ...