使用 position: sticky 达到粘性元素区域悬浮效果
在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。
这种效果一直以来需要通过 JavaScript 实现。不过就在去年,这项结合了 Relative (在屏幕中时) 和 Fixed (移出屏幕时) 的样式效果被提案添加到了 CSS3 中。下面是一个示例:
.sticky {position: -webkit-sticky;position: -moz-sticky;position: -ms-sticky;position: sticky;top: 15px; // 使用和 Fixed 同样的方式设定位置
}
因为这个样式尚未进入标准,还必须使用私有前缀。这里介绍一下浏览器兼容更好的 JS 实现方式:
一个不错的选择是使用 jQuery Pin 这个方便的 jQuery 脚本,支持简单的 Pin 元素、在容器范围内 Pin (例如 Table 内 Pin 住 Th)、在一定尺寸下禁用的功能。
如果要使用原生 JS 实现,可以参照下面的代码:
<style>
.sticky {position: fixed;top: 0;
}
.header {width: 100%;background: #F6D565;padding: 25px 0;
}
</style><div class="header"></div><script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {window.scrollY >= origOffsetY ? header.classList.add('sticky') :header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
</script>
完整代码:
<style>body {margin: 0;text-align: center;font-family: sans-serif;}.fixed {position: fixed;top: 0;}.sticky {width: 100%;background: #F6D565;padding: 25px 0;text-transform: uppercase;}
</style><p style="margin-bottom:100px;">Scroll this page.</p>
<div class="sticky"><h3>Super amazing header</h3></div>
<p style="margin-top:500px;">Still there?</p>
<p style="margin-top:500px;">Yep!</p>
<p style="margin-top:500px;">Scroll so hard!</p>
<script>
var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;function onScroll(e) {window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :sticky.classList.remove('fixed');
}document.addEventListener('scroll', onScroll);
</script>
原文:http://blog.dimpurr.com/css-sticky/
使用 position: sticky 达到粘性元素区域悬浮效果相关推荐
- position:sticky;粘性布局
生效规则 position:sticky 的生效是有一定的限制的,总结如下: 须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效.否则其行为与相对定位相同 ...
- IOS6+ 下,使用position:sticky实现粘性布局
回顾一下 开通博客之后,潦草的写了几篇,之后由于没时间,加上文笔不好等等(好吧,都是借口),基本上就没怎么写过了,其实平时也做了一些记录,但就是犯懒,没有去整理.现在打算重新开始了,记录一些自己学习过 ...
- CSS position: sticky; 粘性定位初识
之前所熟知的CSS position 属性值 有relative.absolute.fixed,当然也不能忽略了static(默认)和inherit(继承). 偶然的一次在 MDN:https://d ...
- css粘性定位position:sticky
前言: css3中有一个很有趣的属性position:sticky,粘性属性,效果是一个吸顶效果,可以说是相对定位relative和固定定位fixed的结合:它主要用在对scroll事件的监听上:简单 ...
- 纯css position:sticky 实现表格首行和首列固定
目录 1.认识position:sticky 2.position:sticky小栗子-实现表格首行和首列固定 2.1 效果图 2.2 代码 1.认识position:sticky 我们先来了解一个c ...
- position:sticky 粘性定位
1.什么是粘性定位? 粘性定位它基于用户的滚动位置来定位. 粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换. 它的行为就像 p ...
- position:sticky 粘性定位 (sticky) 与 固定定位
position:sticky是css定位新增属性:可以说是static(没有定位) 和 固定定位fixed 的结合:它主要用在对 scroll 事件的监听上:简单来说,在滑动过程中,某个元素距离其父 ...
- 粘性定位之 position:sticky
这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景. 即元素先按照普通文档流定位,之后为固定定位,常规用法大概是监听 ...
- position:sticky粘性定位的几种巧妙应用与理解。
一.粘性布局的定义 position:sticky又称为粘性定位,是css3新增的.粘性定位的元素依赖于用户的滚动,在相对定位(relative)与固定定位(fixed)之间进行切换,基于位偏移的值进 ...
最新文章
- 屏幕为什么要正负压供电_负压变换器的设计
- android edittext输入邮箱,[Android教程]EditText怎样限制用户的输入?数字/字母/邮箱
- java获取昨天日期
- SSH-jar包相应作用
- 电信业务分类目录2019_2019年1月国内增值电信业务许可情况分析报告,市场区域发展不均衡...
- 20220129CTF刷题-- WEB方向
- flex 瀑布流 (多列样式column布局内容被截断)
- Linq to sql 结合Entity Framework 的连接查询总结
- 十年开发教会我的那些事儿
- 10分钟10行代码开发APP(delphi 应用案例)
- 简单几步教会你画出透明丝袜,初学者画出透明质感
- SVN修改服务器中的文件夹名称
- chrome控制台出现/null访问
- 如何将虚拟机中的内网IP设置成固定的
- Windows更新错误
- 用myeclipse向Tomcat发布项目的时候出现发布的项目名和文件名称不一致的现象的解决方法(图文)
- 1 Flask_FileUpload
- 安全防御 --- 入侵检测 --- IDS、IPS
- 如何做用户画像分析?
- 关于nextInt()、next()和nextLine()的用法