CSS中位置属性粘性的示例分析

  介绍

这篇文章主要介绍了CSS中位置属性粘性的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

在开发移动端应用程序时,经常会碰到需要这样一种情况,终止,和终止,网站滚动到一定高度的时候,让一部分内容作为导航,也就是置顶显示,我们一般会使用js监听滚动事件来实现,但是新增的css属性位置:粘性可以简单实现

<强>我不是最后一个知道的:位置:粘性

位置的含义是指定位类型,取值类型可以有:静态的,相对的,绝对的,固定的,继承和粘性,这里粘是CSS3新发布的一个属性。我今天重点要说的就是粘性属性

<强>位置:粘用法

<李>

位置:粘性被称为粘性定位元素(粘乎乎地定位元素)是计算后位置属性为粘性的元素。

<李>

简单的理解就是:在目标区域以内,它的行为就像位置:相对,在滑动过程中,某个元素距离其父元素的距离达到粘性粘性定位的要求时(比如上图:100 px);位置:粘这时的效果相当于固定的定位,固定到适当位置。

<李>

可以说是相对定位相对和固定定位固定的结合

<李>

元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于视窗来计算元素的偏移量,

<强>位置:粘性使用条件

1。父元素不能溢出:隐藏或者溢出:汽车属性。2。必须指定上,下,左,right4个值之一,否则只会处于相对定位3。父元素的高度不能低于粘性元素的高度4,粘性元素仅在其父元素内生效

<强>例子

当鼠标下滑到一定高度时,触发位置:粘定位的要求,让“流行,新款,精选“固定为距离顶部44 px的地方。

 CSS中位置属性粘性的示例分析”>,</p> <p> CSS代码</p> <pre类= .tab-control {   ,,位置:粘性;   ,,:44 px;   }

html区域

& lt; tab-control 类=皌ab-control",:标题=癧& # 39;流行& # 39;,& # 39;新款& # 39;,& # 39;精选& # 39;]“祝辞& lt;/tab-control>

<强>在网络开发中注意兼容性:

粘目前仍是一个试验性的属性,并不是W3C推荐的标准。它之所以会出现,也是因为监听滚动事件来实现粘性布局使浏览器进入慢滚动的模式,这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图,基本上可以说这个属性使用的浏览器只有FireFox和iOS的Safari

 CSS中位置属性粘性的示例分析”>,</p> <p class=感谢你能够认真阅读完这篇文章,希望小编分享的“CSS中位置属性粘性的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

CSS中位置属性粘性的示例分析