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:粘性.粘性布局. 在屏幕范围内时,元素不 ...
随机推荐
- POJ 1942 Paths on a Grid
// n*m 的格子 从左下角走到右上角的种数// 相当于从 n+m 的步数中选 m 步往上走// C(n+m,m) #include <iostream> #include <st ...
- HDFS命令行文件操作
Hadoop文件操作命令形式为 hadoop fs -cmd <args> 说明:cmd是具体的文件操作命令,<args>是一组数目可变的参数. Hadoop最常用的文件操作命 ...
- 配置java环境时,java的path地址放在其他地址的前面还是后面?
PATH环境变量里是按顺序查找的,如果电脑里只有一个jdk,放哪都一样,有多个放前面的会优先. 一般是放在最前面吧,以免其他在path中的程序需要用到Java环境而由于在JAVA_PATH之前 ...
- centos mysq table is read only
1.进入mysql数据库目录,使用命令"chown -R mysql <数据库文件夹名称>" 2. "chgrp -R mysql <数据库文件夹名称& ...
- C#对Excel打印时,PageSetup 对象详解
PageSetup 对象包含所有页面设置的属性(左边距.底部边距.纸张大小等).下面按“页面”.“页边距”.“页眉/页脚”.“工作表”和“无对应选项卡”五个类别,逐一介绍. 一.页面 与“页面”选项卡 ...
- 一个DataTable赋值给另一个DataTable的常用方法
DataView view = new DataView();view.Table = DataTableA;view.RowFilter = "itemType = 'book'" ...
- Win7+VS2013初试Thrift
win7环境下VS2013编译boost_1_58_0步骤: 官网下载boost_1_58_0(直接下载),解压 cmd窗口cd到boost_1_58_0,执行bootstrap.bat cmd窗口获 ...
- MFC中TRACE
错误 1 error C1189: #error : Building MFC application with /MD[d] (CRT dll version) requires MFC shar ...
- Maven 包命令
1.必须选中项目,然后单击Run As,选择Maven build. 2.在配置窗体中的Goals栏填写clean package. 注意:Installed JREs中配置的JREs的位置必须是JD ...
- 图书简介:Spring Batch批处理框架
大数据时代批处理利器,国内首度原创解析Spring Batch框架. 内容简介: <Spring Batch 批处理框架>全面.系统地介绍了批处理框架Spring Batch,通过详尽的实 ...