当父级为position:absolute;时，如何使元素从position:fixed;转到flexbox？
让我进一步解释一下：我有一个非常基本的布局100％flexbox。布局只是左侧边栏和内容区域。在内容区域中存在一个从顶部开始400px并且绝对定位的标题（为了覆盖英雄部分），所需的UX是在触摸屏幕顶部后使该标题变粘。
Here is a pen for illustration.
现在，我有机制在给定的滚动位置以编程方式将标题从absolute切换到fixed，这不是问题。
问题是，fixed时：
1.标题覆盖右侧的滚动条（实际问题）
2.必须知道标题的左侧才能设置left:属性（次要问题：我可以使用它，因为我的侧边栏有我可以复制的固定宽度）。
我听说position:sticky可以解决这个问题，但它似乎不像not really well supported so far那样可靠。
当然我无法知道滚动条的大小，因为它取决于每个导航器......否则我会做right:17px;或类似的事情。 ;）
修改
强制标题与滚动条重叠的“错误”的罪魁祸首是overflow:auto上的#content设置。
但是，由于布局基于flexbox，我看不出如何避免使用此方法，因为侧边栏根据定义使用基本flexbox是粘性的。所以一个潜在的问题是：如何在flexbox中粘贴一个元素，使用FLEXBOX？ position:fixed明显不兼容，因为它打破了流程...而且，明显的一步是避免flexbox并使用经典定位重新设计整个布局，但这不符合目的： layout必须与react-native兼容，忽略了经典的CSS定位（仅使用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％的浏览器（尤其是移动浏览器......）真正传播，我会说正确的答案仍然存在