CSS中的position属性sticky详解
在开发移动端app时，经常会碰到需要这样⼀种情况 —— ⽹站滚动到⼀定⾼度的时候，让⼀部分内容作为navbar，也就是置顶显⽰，我们⼀般会使⽤js监听scroll事件来实现，但是新增的css属性position:sticky可以简单实现
我不是最后⼀个知道的：position: sticky
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这⾥sticky是CSS3新发布的⼀个属性。我今天重点要说的就是sticky属性
position:sticky⽤法
position:sticky 被称为粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。
简单的理解就是：在⽬标区域以内，它的⾏为就像 position:relative；在滑动过程中，某个元素距离其⽗元素的距离达到sticky粘性定位的要求时(⽐如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
可以说是相对定位relative和固定定位fixed的结合
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport 来计算元素的偏移量。
position:sticky 使⽤条件
1.⽗元素不能overflow:hidden或者overflow:auto属性。
2.必须指定top、bottom、left、right4个值之⼀，否则只会处于相对定位
3.⽗元素的⾼度不能低于sticky元素的⾼度 4、sticky元素仅在其⽗元素内⽣效
例⼦
当⿏标下滑到⼀定⾼度时，触发position:sticky定位的要求，让“流⾏，新款，精选”固定为距离顶部44px的地⽅。
css代码
.tab-control{
position: sticky;
top: 44px;
}
html区域
<tab-control class="tab-control" :titles="['流⾏','新款','精选']"></tab-control>
在web开发中注意兼容性：
sticky⽬前仍是⼀个试验性的属性，并不是W3C推荐的标准。它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进⼊慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图，基本上可以说这个属性使⽤的浏览器只有FireFox和iOS的Safari
总结
css固定定位
到此这篇关于CSS中的 position属性sticky详解的⽂章就介绍到这了，更多相关css position属性sticky内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。