如何獲取元素與頁面一起滾動...僅用於頁面的一部分？

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表格...