css3 position:sticky
最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部;
实现方法:
使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式;
bug1:获取指定位置错误,因为上面都是图片,在图片未加载出来时获取高度,高度值不对,解决办法就是在imgae上加bindload事件,在图片加载加载完成之后再获取高度;
bug2:onPageScroll事件会有延迟,导致最终效果会出现卡顿,百度之后知道有一个position:sticky,是一个很有意思的属性;
在屏幕范围是该元素的位置不会受到定位的影响,当该元素的位置将要移出偏移的范围时,定位又会变成fixed。根据设置的left top等属性值成固定位置的效果。
sticky属性的特点:
该元素并不脱离文档流,仍然保留元素原来在文档流中的位置;
当元素在容器中被滚动超过指定的偏移值时,元素就会固定到容器的指定位置,也就是说如果元素设置设置top:50px;那么在sticky元素滚动到距离相对定位元素的顶部50px时固定,不再向上移动;
元素固定的相对偏移是相对于离他最近的具有滚动框的祖先元素,如果祖先元素都没有滚动框,那么就是相对于viewport来计算元素的偏移量
tip:需要考虑父元素的高度的情况,sticky元素在到达】父元素的底部时,则不会再发生定位,如果父元素并没有比sticky元素高,那么sticky元素一开始就到达了底部,就不会有定位的效果,当元素滚动到父元素的底部时sticky属性失效
如果父元素的overflow属性不是默认的visible,那么sticky属性不会生效
但是这个属性的兼容性不是很好,可以使用的浏览器只有FireFox和Safari
css3 position:sticky的更多相关文章
- CSS3的position:sticky介绍
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
- css3新属性position: sticky 一分钟实现 导航栏悬停功能
css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...
- position:sticky的兼容性尝试
开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...
- position:sticky用法
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
- 粘性固定属性 -- position:sticky
概述 position: sticky,这是一个比较容易忽略的css3 position 新属性,它的作用即为实现粘性布局,它是 relative 与 fixed 的结合. 用法 默认情况下,其表现为 ...
- 使用 position:sticky 实现粘性布局
如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...
- position:sticky
使用sticky定位可以简洁的实现固定功能 例如,左右布局页面,左侧菜单,右侧内容,内容区域滚动时,不希望菜单区域滚动,而是固定不动 以往要实现这个功能,需要使用fixed定位菜单,菜单脱离文档流,布 ...
- CSS使用position:sticky 实现粘性布局
简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...
- position:sticky粘性布局
新的布局方式,专门用于 tab栏悬浮效果: 当tab栏在可视区域时,正常滚动, tab栏不再可视区域时,悬浮置顶. position:-webkit-sticky; position:sticky; ...
随机推荐
- vue native
1.示例 <el-icon icon="Setting" size="sm" @click.native="ceshi">< ...
- iOS开发 — (UINaVigationController)导航控制器,界面传值
UINavigationController 继承于 UIViewController , 以栈的方式管理所 控制的视图控制器 . 至少要有一个被管理的视图控制器 ,这个控制器我们称作导航控制器的根视 ...
- mvc已添加了具有相同键的项
异常详细信息: System.ArgumentException: 已添加了具有相同键的项. 场景重现:在地址栏输入 http://localhost:51709/Home/Index?user[0 ...
- python(24)- 面向对象进阶
面向对象基础知识: 1.面向对象是一种编程方式,此编程方式的实现是基于对类和对象的使用: 2.类是一个模板,模板中包装了多个‘函数’供使用(可以将多函数中公用的变量封装到对象中): 3.对象,根据模板 ...
- jquery $.proxy使用 Jquery实现ready()的源码
jquery $.proxy使用 在某些情况下,我们调用Javascript函数时候,this指针并不一定是我们所期望的那个.例如: 1 //正常的this使用 2 $('#myElement') ...
- ARM Holdings
http://en.wikipedia.org/wiki/Advanced_RISC_Machines ARM Holdings (Redirected from Advanced RISC Mac ...
- Python--数据类型整理
数据类型整理-------------------------------------------------------------------------------------------- ...
- Machine Learning: 一部气势恢宏的人工智能发展史
转载自:雷锋网 本文作者:陈圳 2016-09-12 09:46 导语:机器学习的从产生,发展,低潮和全盛的历史 雷锋网(公众号:雷锋网)按:本文作者DataCastle数据城堡,主要介绍了机器学习的 ...
- Dos下mySql
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 ...
- 制作一个塔防游戏 Cocos2d-x 2.1.4 (一)
在这篇文章,将会学习到怎样制作一个塔防游戏.在这其中,学习怎样在设定的时间内出现一波波的敌人,使这些敌人沿着指定的路点前进.怎样在地图上指定的位置创建炮塔.怎样使炮塔射击敌人,怎样可视化调试路点和炮塔 ...