Scroll then fix content

[JerryBels]

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:

@udi

Hi Boffy. If I’m understanding your question correctly, I think the solution is to put your fixed element outside of the scrolling content container. Something along these lines.

<ion-view class="wrapper">

    <div class="bar bar-header">
        fixed stuff goes here
    </div>

    <ion-content scroll="true" class="has-header">
        scrolling stuff goes here
    </ion-content>

</ion-view>

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 ) : http://codepen.io/JerryBels/pen/pvNGMm

Thanks !

[JerryBels]

I have found something that I could use : http://codepen.io/anon/pen/LpCyg

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

[JerryBels]

Okay, I found a solution that works perfectly ! I updated the codepen with it : http://codepen.io/JerryBels/pen/pvNGMm

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

Hope it helps someone !