Absolute to fixed item in flexbox layout

How would you make an element from position:absolute;

to position:fixed;

when parent flexbox

?

Let me clarify below: I have a very simple 100% format flexbox

. Layout is just the left sidebar and content area. The content area has a heading starting at the 400px

top and absolutely positioned (to cover the hero section), the desired UX should make that heading sticky after it touches the top of the screen.

Here is a pen for illustration.

Now I have a mechanism to programmatically switch the title from absolute

to fixed

at a given scroll position, this is not a problem.

The problem is that fixed

: 1.the title spans the scrollbar to the right (real problem) 2.The left side of the title needs to be known to set the property left:

(secondary problem: I can live with it since my sidebar has a fixed width I can copy).

I've heard of position:sticky

one that does the trick, but it doesn't seem as robust as it isn't very well supported yet .

Of course, I cannot know the size of the scrollbars as it depends on each nav ... otherwise I would just do right:17px;

or something.;)

EDIT

The "error" culprit causing the title to overlap the scrollbar this overflow:auto

is set to #content

. However, since the layout is based on flexbox

, I can't see how to avoid using this approach as the sidebar is sticky by definition using the base one flexbox

. So the main question is: how to insert an item into flexbox using FLEXBOX? position:fixed

clearly incompatible as it interrupts the flow ... Also an obvious step would be to avoid flexbox

and redesign the whole layout using classic positioning, but that doesn't fit the purpose: the layout must be react-native compatible, which ignores classic CSS positioning (only uses FLEXBOX) ... see here... (of course action-native has a different way of handling scrolling, hence the problem in web environments).

To continue my project I had to make a decision and I went to use only position:absolute

but programmatically changing my property top

(using react, but can be implemented with JQuery or any other technology capable of knowing the current scroll position).

In pseudocode, he would like:

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

      

        
        
        
      

    

Obviously this does NOT answer the original question.

The "official" answer would be to use position:sticky

, but until it gets really mainstream, let's say 95% of browsers (especially mobile) ... I would say the correct answer hasn't been found yet.