如何获取元素与页面一起滚动...仅用于页面的一部分？

Question

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

到目前为止，我只在CSS中寻找这个问题的解决方案，因为这是我现在所知道的。如果有什么方法，请详细解释其工作原理和原因。

感谢您的帮助

Answer 1

position: sticky不正是你想要的。但它是not widely implemented尚未...

• 只有safari完全支持与-webkit前缀。
• Chrome支持<th>，但不支持<thead>或<tr>元素。
• Firefox根本不支持表格元素。
• 在IE或电流边缘不支持，而是应该在边缘支持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

有polyfills过，我知道，如果Stickyfill最新。不幸的是，它不适用于Firefox表格...