ページをスクロールする要素を取得する方法...ページの一部のみ？

Question

私はposition: fixed;のようにページをスクロールする要素を取得しようとしています。しかし、固定位置とは異なり、永遠にページに固定する必要はありません。親の一番下に達すると、ユーザーがスクロールを続けても停止します。

これまで私はCSSでこの問題の解決策を探していましたが、これは今回私が実際に知っているすべてのものです。方法がある場合、それがどのように、なぜそれがうまくいくのかについての詳細な説明を参考にしてください。

Answer 1

position: stickyが正確に何をしたいん助けを

感謝。しかし、それは

• Safariのみが-webkit接頭辞を完全にサポートしています...まだnot widely implementedです。
• クロムは<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のテーブルでは動作しません。