從flexbox佈局上的絕對元素到固定元素

Question

當父項爲flexbox時，如何使元素從position:absolute;變爲position:fixed;？

讓我進一步解釋：我有一個非常基本的佈局100％flexbox的基礎。佈局只是一個左側邊欄和一個內容區域。在內容區域中生成一個標題，從頂部開始400px，並且絕對定位（爲了覆蓋英雄部分），所需的用戶體驗是在觸摸屏幕頂部後使其變得粘稠。

Here is a pen for illustration.

現在，我有機構以編程從absolute在給定的滾動位置切換頭fixed，這是沒有問題的。

的問題是，當fixed： 1.頭覆蓋了滾動條向右（真正的問題） 2.頭的左側是爲了設置left:屬性（小問題，被稱爲：我可以和它一起生活，因爲我的側邊欄有我可以複製的固定寬度）。

我聽說有一個position:sticky這是訣竅，但它似乎並不可靠，因爲not really well supported so far。

當然，我不知道滾動條的大小，因爲它取決於每個導航器......否則我只會做right:17px;或類似的東西。 ）

EDIT

的「錯誤」迫使頭重疊滾動條的罪魁禍首是overflow:auto集上#content。 但是，由於基於flexbox的佈局，我沒有看到如何避免使用此方法，因爲根據定義使用基本flexbox，側邊欄是粘性的。所以一個潛在的問題是：如何在Flexbox中粘貼一個元素，使用FLEXBOX？ position:fixed顯然不兼容，因爲它打破了流程...此外，明顯的一步是避免flexbox並使用經典定位重新設計整個佈局，但這不符合目的：佈局必須與反應 - 忽略經典CSS定位的本機（僅使用flexbox）... See here。 （當然，react-native有另一種處理滾動的方法，因此也是web環境中的問題）。

爲了繼續與我的設計，我不得不做出一個決定，我只能用position:absolute去了，但（使用反應編程調整我的top屬性，但可以使用jQuery或實現任何技術能夠知道當前滾動位置）。

在僞代碼，它想：

//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 

顯然，這並沒有回答最初的問題。

「官方」的答案是使用position:sticky，但直到95％的瀏覽器（尤其是移動設備......）才真正傳播開來，我會說正確的答案仍然可以找到。

Answer 1

要解決第一個問題，請嘗試以下操作： #main #content #header { position：fixed; ... } 從#content中刪除overflow: auto;財產。並且還添加align-items:stretch至#sideBar。