纯css实现吸顶效果

今天写pad端顶部导航栏时遇到一个问题(其实也不能算问题,只是为了引出话题而已)，导航栏是不随着列表页滑动而滑动的，按照以往的思维直接给导航栏一个position:fixed，然后设置top:0就欧凯了。

不过这样会使导航栏脱离文档流，导致列表的第一条会有部分被导航栏遮挡住。问题不大，继续按照以外的思维给列表的外部容易来个margin-top，完美！

如果是之前的话，这个需求肯定告一段落了，然后继续coding，不过今天我莫名的觉得应该有更优雅的方式来实现，于是百度了一翻，果然发现了今天的主角position: sticky;。

什么是sticky

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位

上述来源于mdn关于黏性定位的介绍

来一个demo看看

section {
    border: 2px solid green;
    margin-bottom: 40px;
}

h2 {
    position: sticky;
    top: 0;
    background-color: red;
    color: #fff;
}

p {
    word-wrap: break-word;
}

注意事项

1. 父级元素不能有任何除了overflow:visible以外的overflow设置(其他的坑等实践中遇到再补充…)

浏览器兼容

目前主流浏览器都兼容了