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 初探的主要内容,如果未能解决你的问题,请参考以下文章

css3中position:sticky 新属性

position:sticky

position:sticky用法

粘性定位position:sticky

JS简单实现“滚动到顶部“按钮悬浮效果,在一定高度才显示 - 替代CSS粘性定位position:sticky方案

JS简单实现“滚动到顶部“按钮悬浮效果,在一定高度才显示 - 替代CSS粘性定位position:sticky方案