在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上。还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计。
这种效果一直以来需要通过 JavaScript 实现。不过就在去年,这项结合了 Relative (在屏幕中时) 和 Fixed (移出屏幕时) 的样式效果被提案添加到了 CSS3 中。下面是一个示例:
.sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: sticky; top: 15px; // 使用和 Fixed 同样的方式设定位置 }
当页面出现滚动条时,会自动悬浮到页面的最上方
时间: 2024-10-07 10:25:08