如何使用页面滚动元素...仅用于页面的一部分？

Question

所以我一直试图让一个元素与页面一起滚动，类似于position: fixed;。然而，与固定位置不同，我不希望它永远固定在页面上，一旦它到达其父级的底部，它就会停在那里，即使用户继续向下滚动。

到目前为止，我只在CSS中寻找这个问题的解决方案，因为这是我此时真正知道的。如果有办法，请帮助详细解释它的工作原理和原因。

感谢您的帮助

Answer 1

position: sticky完全符合您的要求。但它是not widely implemented但是......

• 只有safari完全支持-webkit前缀。
• Chrome支持<th>，但不支持<thead>或<tr>元素。
• Firefox根本不支持表格元素。
• 不支持IE或当前Edge，但应该支持Edge 16

以下是它的工作原理：

注意：您必须指定一个top|left|right|bottom（可以是0），否则会被解释为position: relative。

thead { 
  position: sticky; /* -webkit-sticky for Safari */
  top: 10px;
  background: white; 
}

JSFiddle example with a table header that works on Chrome and Safari

也有polyfill，我知道最新的Stickyfill。不幸的是它在Firefox表上也不起作用......