position:sticky属性与js实现

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、安卓目前不支持）