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;
}
目前来说还需要用私有前缀~~
sticky生效条件:
1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
2、必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
浏览器兼容性:
由于这是一个全新的属性,以至于到现在都没有一个规范,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 0;
}
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);
这里是一个简单的demo。
嗯,对于前端来说,新技术用于提升用户体验才能体现其价值~~
本文转载,原文来源于:https://www.qianduan.net/position-sticky-introduction/
position:sticky介绍相关推荐
- position:sticky 的 polyfill——stickyfill 源码浅析
本人最近在修改 blogsue 中的样式时,使用到了 position: sticky.话不多说,开始主要内容. 定义 position: sticky 是 CSS position 属性的一个新值. ...
- 使用 position: sticky 达到粘性元素区域悬浮效果
在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上.还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性 ...
- 纯css position:sticky 实现表格首行和首列固定
目录 1.认识position:sticky 2.position:sticky小栗子-实现表格首行和首列固定 2.1 效果图 2.2 代码 1.认识position:sticky 我们先来了解一个c ...
- CSS position: sticky; 粘性定位初识
之前所熟知的CSS position 属性值 有relative.absolute.fixed,当然也不能忽略了static(默认)和inherit(继承). 偶然的一次在 MDN:https://d ...
- 当 position:sticky 遇到 bootstrap 浮动布局时候的踩坑记录
当第一次接触到 position:sticky 这个属性,我就意识到之前的不少 js 场景可以用这个 css 属性去改写.譬如 网站 右侧的不少广告,滚动上去后需要 fixed,完全就是 sticky ...
- IOS6+ 下,使用position:sticky实现粘性布局
回顾一下 开通博客之后,潦草的写了几篇,之后由于没时间,加上文笔不好等等(好吧,都是借口),基本上就没怎么写过了,其实平时也做了一些记录,但就是犯懒,没有去整理.现在打算重新开始了,记录一些自己学习过 ...
- [css] 说说position:sticky有什么应用场景
[css] 说说position:sticky有什么应用场景 吸顶效果 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试 ...
- position:sticky布局
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
- position: sticky 属性
关于 position 属性主要有五个值: static relative fixed absolute sticky 常见的就是 relative 和 absolute 这两个属性. relativ ...
最新文章
- 【组队学习】【34期】百度飞桨AI达人创造营
- Centos7配置为NAT服务器
- JBPM学习(一):实现一个简单的工作流例子全过程
- 如何通过反射将字符串转换为类
- Flume 实战开发指南
- 零基础零代码,也能一周学会动态报表?这个方法很多人都不知道
- ASP.NET 程序中常用的三十三种代码
- AI发来贺电,您的2333号奶牛已进入恋爱时节 | 野性的呼唤
- 机器学习之 决策树(Decision Tree)
- 科目二考试之侧方位停车步骤
- [原创]【图解】千千静听皮肤制作全析讲解[新增5.0版本专属语句+图片分析]
- PHP解析大型Excel表格的库:box/spout
- ubuntu 改屏幕分辨率命令_Ubuntu修改屏幕分辨率
- 采用Pyinstaller将python程序打包成exe可执行程序
- B站视频下载器,超清4k视频下载,一键解析视频合集,支持批量下载提取视频封面
- 【51单片机】 ULN2003模块 驱动步进电机(5线)正反转 代码以及接线图(简单教学,一看就会)
- 现在, Delphi 的多线程已经非常易用了!
- [LeetCode] 589. N-ary Tree Preorder Traversal
- 为什么神经网络的激活函数必须使用非线性函数?
- LeetCode之77. Combinations