position:sticky用法
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如,侧边栏的部分区域。position:sticky为此而生。
position:sticky用法
position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。
使用起来也非常简单:
.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
<div class="header"></div>
CSS
.sticky{
position:fixed;
top:0;
}
.header{
width:100%;
background:#F6D565;
padding:25px
}
JS
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);
嗯,对于前端来说,新技术用于提升用户体验才能体现其价值~~
position:sticky用法的更多相关文章
- CSS3的position:sticky介绍
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
- 使用 position:sticky 实现粘性布局
如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...
- 粘性固定属性 -- position:sticky
概述 position: sticky,这是一个比较容易忽略的css3 position 新属性,它的作用即为实现粘性布局,它是 relative 与 fixed 的结合. 用法 默认情况下,其表现为 ...
- 粘性固定 position:sticky
在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky,它是相对定位(position:relative)和固定定位(position ...
- position:sticky的兼容性尝试
开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...
- position:sticky
使用sticky定位可以简洁的实现固定功能 例如,左右布局页面,左侧菜单,右侧内容,内容区域滚动时,不希望菜单区域滚动,而是固定不动 以往要实现这个功能,需要使用fixed定位菜单,菜单脱离文档流,布 ...
- CSS使用position:sticky 实现粘性布局
简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...
- position:sticky粘性布局
新的布局方式,专门用于 tab栏悬浮效果: 当tab栏在可视区域时,正常滚动, tab栏不再可视区域时,悬浮置顶. position:-webkit-sticky; position:sticky; ...
- position sticky 定位
1.兼容性 https://caniuse.com/#search=sticky chrome.ios和firefox兼容性良好. 2.使用场景 sticky:粘性.粘性布局. 在屏幕范围内时,元素不 ...
随机推荐
- Oracle时间函数numtoyminterval()
格式:NumToYMInterval(n, interval_unit); n: 数值类型 interval_unit: 'YEAR', 'MONTH' ,或其他可以转换成这两个值之一的表达式 N ...
- 线程----BlockingQueue (转)
t java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue; import java.ut ...
- jad安装
见:http://www.myexception.cn/eclipse/1469829.html 最开始看了一个坑爹的博客,由于是低级菜鸟一直被误导(设置的是.class的打开方式) 执行完链接够的步 ...
- JS面向对象组件(四) -- 面向对象的继承
什么是继承 •在原有对象的基础上,略作修改,得到一个新的对象 •不影响原有对象的功能 //父类 createPerson function createPerson(name,sex){ this.n ...
- 2015年目标一:学习掌握python
俗话说:凡事预则立,不预则废.又到新的一年,给自己确定第一个目标:学习python.掌握python基本用法.其实2014年已经断断续续接触过python,但一直是不系统地在学习,而且基本上没有把py ...
- How do I list all tables/indices contained in an SQLite database
How do I list all tables/indices contained in an SQLite database If you are running the sqlite3 comm ...
- [Java]获取图片高和宽
通过javax.imageio.ImageIO类中的read()函数读取的图片,存放在类java.awt.image.BufferedImage类中.调用BufferedImage类中的getWidt ...
- 前端面试题(JS篇)
原题地址:http://handyxuefeng.blog.163.com/blog/static/454521722013111714040259/ 好吧,最近打算换工作,所以关注比较多的是面试题, ...
- Linux学习--第二波
虽然安装的centos感觉不能上网,权限也不知道怎么设置. 偶然的机会发现了一个好东西,博客:http://www.cnblogs.com/xiaoluo501395377/tag/CentOS/.有 ...
- elang 字符处理
%%% %%% 判断是否是字符串 %%% 从文件中提取中文 %%% %%% %%% %%-------------------------------------------------------- ...