Scroll then fix content

Hello guys,

I need to set an element in the middle of the page, that scrolls with the page, and fix itself when reaching the header. Similar to what is demonstrated here : Scroll-Then-Fix Content | CSS-Tricks - CSS-Tricks

So, I discovered that translate3D breaks the position:fixed css…

There is a solution here : CSS Position Fixed:

But as you would understand I can’t do that, since I need the element to scroll until it reaches the header.

I tried applying overflow-scroll=“true” to the content. It works if adding

overflow-scroll .scroll {
    transform: translate(0, 0);

But I lost a lot in functionnalities (related to scrolling for example). Then I need to create a new binding to the scroll element, etc…

Here is a Codepen to play with ( I learned my lesson @mhartington :wink: ) :

Thanks !

I have found something that I could use :

Will come back with the answer if I manage to get it or with more questions… :stuck_out_tongue:

Okay, I found a solution that works perfectly ! I updated the codepen with it :

Not sure what is better, performance wise, though. It runs perfectly on my Nexus 5 at least.

Hope it helps someone !

1 Like