what is 'sticky'?
position指定位类型,取值类型有:static
、relative
、absolute
、fixed
、inherit
和sticky
,而sticky是CSS3新发布的一个属性。
这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景特别是一些导航栏。
how to use 'sticky'?
实现某个元素的自定位和自悬浮只需要短短两行代码:
position: sticky;
top: 200px; //根据自己的需求
这里需要注意几点:
1.设定为position:sticky元素的任意父节点的 overflow 属性必须是 visible,否则position:sticky不会生效。
2.如果position:sticky元素的任意父节点定位设置为position:relative | absolute | fixed,则元素相对父元素进行定位,而不会相对 viewprot 定位。
3.必须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
4.设置了position: sticky的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
而在这之前想要实现类似的效果还是需要用js来控制:
//js实现position:sticky功能
$(window).scroll(function() {
if($(window).scrollTop() > 500) { //具体数值根据需求来设
$('.pick-part').css({
'position' : 'fixed',
'top' : '0'
})
} else {
$('.pick-part').css({
'position': 'absolute',
'top': '78vh'
})
}
});
where can I have 'sticky'?
sticky目前只是一个试验性的属性,而并不是W3C推荐的标准。它之所以会出现,也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式,这与浏览器想要通过硬件加速来提升滚动的体验是相违背的。
不过目前这个属性在越来越多的浏览器上得到了支持,Chrome、FireFox
、Edge、Safari
包括小程序端都可以实现此效果(IE、安卓目前不支持)