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; 或类似的事情。 ;)

编辑

导致标题与滚动条重叠的“错误”的罪魁祸首是#content 上设置的overflow:auto。 但是，由于布局是基于flexbox，我看不出如何避免使用这种方法，因为侧边栏根据定义使用基本flexbox 是粘性的。所以一个潜在的问题是：如何在 flexbox 中粘贴一个元素，使用 FLEXBOX ？ position:fixed 显然不兼容，因为它破坏了流程......此外，明显的步骤是避免 flexbox 并使用经典定位重新设计整个布局，但这不是目的：布局必须是与忽略经典 CSS 定位的 react-native 兼容（仅使用 flexbox）...See here。 （当然，react-native 有另一种处理滚动的方式，因此在 web 环境中存在问题）。

为了继续我的设计，我必须做出决定，我只使用position:absolute，但以编程方式调整我的top 属性（使用react，但可以使用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 { 位置：固定； ... } 从#content 中删除overflow: auto; 属性。并将align-items:stretch 添加到#sideBar。