position:sticky了解一下

发布于 2020-09-15 21:03:29 阅读 2586 次暂无评论

常见的网页侧边栏滚动固定效果，一般情况下都会使用js来实现。其实css的position:sticky就可以快速实现这个效果，具体的使用规则且听我一一道来。

初始状态下侧边栏在自己的默认位置处

页面向下滚动时，工具栏会固定在网页顶部，不再跟随网页滚动

等到页面重新滚动回来时，工具栏又会回到原来的位置

示例代码如下所示

#toolbar {
  position: -webkit-sticky; /* safari浏览器需要加上前缀 */
  position: sticky;
  top: 20px;
}