CSS:position:sticky;不生效的原因

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS:position:sticky;不生效的原因相关的知识,希望对你有一定的参考价值。

参考技术A sticky属性依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

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 新属性

你不知道的CSS---position小技巧

Css position:sticky 初探

position:sticky

position:sticky用法

粘性定位position:sticky