Css position:sticky 初探
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Css position:sticky 初探相关的知识,希望对你有一定的参考价值。
参考技术A *sticky属性 与relative类似 但是其offset实根据最近的拥有scrolling box的先祖元素来确定的,如果没有拥有scrolling box的话会根据viewport来计算那么什么是scrolling box呢?
An html scrollbox is basically a box with scrollbars. Usually the scrollbox is made using the HTML <div> tag and the scrollbars are defined using the CSS overflow property. (From https://www.html.am/html-codes/scrollboxes/html-scrollbox.cfm )
姑且理解为
含有滚动条的或者含有overflow属性的皆为scroll box(试了下当设置为auto,overlay,sroll的时候会产生效果,估计就是所谓的scroll box)
实践:
1.设置父元素overflow:auto,子元素设置为sticky且top:10px;
可以看到sticky的元素根据距其最近的具备scoll box的父元素计算offset
2.去除overflow:auto
可以看到之前设置的top属性无效了,找不到先祖元素为scrollbox的了,故基于viewport来计算offset:
看到有些文章说设置overflow:auto或者hidden不会生效,特地试了下发现是有效的..很疑惑。
1.auto
2.hidden
可以看到定位属性还是产生了效果。(到底是sticky还在生效还是已经类似于relative效果,待研究)
还是基于父元素为scroll box:
1.对于块级兄弟元素(位于普通文档流中)
前一个节点为block元素,自身为sticky,不会覆盖前面普通文档流中的元素
2.对于块级兄弟元素(脱离文档流::float)
对于脱离文档流的元素(float或者absolute)会直接按祖先元素的顶部开始计算
sticky VS fixed
1.先来看 fixed
2.再来看sticky, 去除父元素overflow(使之根据viewport计算)
可以看到当给其父元素设置固定高度后,sticky元素会受制于父元素的高度,即最多到达父元素的底部
浏览器兼容性:
*仅为个人学习之用
Ref: https://www.w3.org/TR/css-position-3/#sticky-position
css3中position:sticky 新属性
关于position的属性一般常用的是relative/absolute/fixed
一般不设定position值的情况下, 默认是static.
先总结下常见的属性值:
1、position: static
static(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。
2、position: relative
relative(相对定位)是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置不会受到影响。
3、position: absolute
absolute(绝对定位)是指给元素设置绝对的定位,相对定位的对象可以分为两种情况:
1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute,则这时元素的定位对象为此已设置position属性的祖先元素。
2) 如果并没有设置了position属性的祖先元素,则此时相对于body进行定位。
4、position: fixed
简单来说fixed是特殊版的absolute,fixed元素总是相对于body定位的。
5、inherit
继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。
/////////////重点来了////////////
这次的主角是sticky
从字面意义上理解: sticky 是粘,粘贴的意思,所以先称之为粘性定位。
特性: 设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。
常见应用场景: 导航和背景图等.
如:
1、当给导航条设定为position: sticky; top: 20px;时, 滚动条在移动的过程中, 起初的效果如同是position: relative,跟随着滚动条同时移动, 当top值达到20px后, 效果就像position: fixed;一样,固定在头部不会随滚动条滚动而移动.
2、另一种效果, 想必做前端的小伙伴在浏览一些网站的时候, 也碰到过类似的效果, 就是当滑动页面到达某块区域的时候, 背景图突然被固定, 当划过某块区域后, 背景图突然被解除固定随着滚动条移动.
特点:
1、该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
2、当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。
3、元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量
缺点:
兼容性有点心塞. 而且在ios上很流畅,但是安卓上,安卓4.4.4以下全军覆没,而且安卓7上也跪了,使用的小伙伴多注意一下
解决方法:
通过判断当前设备是否支持sticky这个属性,如果不支持则替换成fixed和relative定位组合
demo如下:
如果有不理解的地方,可以留言给我, 咱们互相学习沟通.一起进步
以上是关于Css position:sticky 初探的主要内容,如果未能解决你的问题,请参考以下文章