Wie bekomme ich ein Element, um mit der Seite zu blättern ... nur für einen Teil der Seite?

Question

Also habe ich versucht, ein Element zum Blättern mit der Seite zu bekommen, ähnlich position: fixed;. Im Gegensatz zu nur festen Position möchte ich nicht, dass es für immer auf die Seite fixiert wird, sobald es die Unterseite seines Elternteils erreicht, stoppt es dort, selbst wenn der Benutzer weiter scrollt.

Bisher habe ich nur nach Lösungen für dieses Problem in CSS gesucht, da dies alles ist, was ich wirklich zu diesem Zeitpunkt weiß. Wenn es einen Weg gibt, bitte helfen Sie mit einer guten detaillierten Erklärung, wie und warum es funktioniert.

Danke für die Hilfe

Answer 1

position: sticky tut genau das, was Sie wollen. Aber es ist not widely implemented noch ...

• Nur Safari volle Unterstützung mit dem -webkit Präfix hat.
• Chrome unterstützt es auf <th>, aber nicht auf <thead> oder <tr> Elemente.
• Firefox unterstützt keine Tabellenelemente.
• Keine Unterstützung auf IE oder aktuellen Rand, sondern soll in Rand 16

hier unterstützt werden, wie es funktionieren würde:

Hinweis: müssen Sie eine der top|left|right|bottom angeben (kann 0 sein) ansonsten wird es als position: relative interpretiert.

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

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

Es gibt zu polyfills, die aktuellste ich, wenn Stickyfill wissen. Leider funktioniert es auch nicht in Firefox-Tabellen ...