Von absoluten zu festen Element auf Flexbox-Layout

Question

Wie würden Sie ein Element von position:absolute; zu position:fixed; gehen, wenn übergeordnet ist flexbox?

Lassen Sie mich weiter erklären: Ich habe ein sehr einfaches Layout 100% flexbox basiert. Das Layout ist nur eine linke Seitenleiste und ein Inhaltsbereich. Im Inhaltsbereich lebt eine Kopfzeile, die bei 400px von oben beginnt und absolut positioniert ist (um eine Heldensektion abzudecken), die gewünschte UX soll diese Kopfzeile klebrig machen, nachdem sie den oberen Teil des Bildschirms berührt.

Here is a pen for illustration.

Nun, ich den Mechanismus habe programmatisch den Header von absolute zu fixed bei einer gegebenen Bildlaufposition zu wechseln, ist dies kein Problem.

Das Problem ist, wenn fixed: 1. der Header die Scrollbar (reale Ausgabe) 2. linke Seite des Kopfes nach rechts erstreckt muss bekannt sein, um die left: Eigenschaft (kleines Problem zu setzen: I kann damit leben, da meine Sidebar eine feste Breite hat, von der ich kopieren kann).

Ich hörte von einer position:sticky, die den Trick tut, aber es scheint nicht so zuverlässig wie not really well supported so far.

Natürlich kann ich die Größe der Bildlaufleisten nicht wissen, da es auf jedem Navigator abhängt ... sonst würde ich einfach right:17px; oder so etwas tun. ;)

EDIT

der Täter von der "Bug" des Headers zwingt die scrollbar zu überlappen ist die overflow:auto Auf #content. Da jedoch das Layout flexbox basiert, sehe ich nicht, wie man diesen Ansatz vermeiden kann, da die Sidebar per Definition klebrig ist und flexbox verwendet wird. Eine grundlegende Frage wäre also: Wie man ein Element in flexbox steckt, FLEXBOX VERWENDEN? Die position:fixed ist eindeutig nicht kompatibel, da es den Fluss bricht ... Außerdem wäre der naheliegende Schritt, flexbox zu vermeiden und das gesamte Layout mit klassischer Positionierung neu zu gestalten, aber das ist außerhalb des Ziels: Das Layout muss kompatibel sein mit Native, die klassische CSS-Positionierung ignoriert (nur Flexbox) ... See here. (Natürlich hat reactive-native eine andere Möglichkeit, mit Scrolling umzugehen, daher das Problem in Webumgebungen).

Um mit meinem Design zu gehen, ich hatte eine Entscheidung zu treffen, und ich ging position:absolute nur mit, sondern programmatisch meine top Eigenschaft Einstellung (unter Verwendung reagiere aber mit JQuery oder was auch immer Technologie in der Lage zu wissen, die aktuelle Bildlaufposition umgesetzt werden könnte).

In Pseudo-Code, würde es mögen:

//when scroll reaches 400px  
if getScrollTopPostion() > 400 

//recalculate top position of given element to equal current Scroll position. 
//This gives the effect that the element is sticky. In reality it is just live recalculated... 
//Quid of performances?? no idea 
then setTop(getScrollTopPostion()) 

//otherwise, let the element absolutely positioned at 400 
else 400 

Offensichtlich ist dies nicht die ursprüngliche Frage nicht beantworten.

Die "offizielle" Antwort wäre, position:sticky zu verwenden, aber bis es wirklich über 95% der Browser verbreitet wird (besonders mobile ...), würde ich sagen, die richtige Antwort ist immer noch zu finden.

Answer 1

Um die 1. Ausgabe zu beheben, versuchen Sie Folgendes: #main #content #header { Position: fixed; ... } Entfernen Sie die overflow: auto; Eigenschaft von #content. Und fügen Sie auch align-items:stretch zu #sideBar hinzu.