position:sticky介绍
浏览:3257次 出处信息
整理自:STICK YOUR LANDINGS! POSITION: STICKY LANDS IN WEBKIT
中文原文:position:sticky介绍
请尊重版权,转载请注明来源,多谢~~
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如,侧边栏的部分区域。position:sticky为此而生。
position:sticky用法
position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。
使用起来也非常简单:
1 2 3 4 5 |
.sticky { position: -webkit-sticky; position:sticky; top: 15px; } |
目前来说还需要用私有前缀~~
浏览器兼容性:
由于这是一个全新的属性,以至于到现在都没有一个规范,W3C也刚刚开始讨论它,而现在只有webkit nightly版本和chrome 开发版(Chrome 23.0.1247.0+ Canary)才开始支持它。
另外需要注意的是,如果同时定义了left和right值,那么left生效,right会无效,同样,同时定义了top和bottom,top赢~~
fall back
虽然其它浏览器尚不支持,但是实现起来其实不难,我们可以用js简单实现:
HTML
1 |
<div class="header"></div> |
CSS
1 2 3 4 5 6 7 8 9 |
.sticky { position: fixed; top: 0; } .header { width: 100%; background: #F6D565; padding: 25px 0; } |
JS
1 2 3 4 5 6 7 8 9 |
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); |
嗯,对于前端来说,新技术用于提升用户体验才能体现其价值~~
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:三角形变形记之纯css实现的分布导航条效果
后一篇:IE 颜色 Hack全收集 >>
文章信息
- 作者:神飞 来源: 前端观察
- 标签: position sticky
- 发布时间:2012-09-17 23:13:53
近3天十大热文
- [66] Oracle MTS模式下 进程地址与会话信
- [65] Go Reflect 性能
- [64] 如何拿下简短的域名
- [59] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [58] IOS安全–浅谈关于IOS加固的几种方法
- [52] 视觉调整-设计师 vs. 逻辑
- [47] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 界面设计速成