CSS position: sticky


#1

Hi,

thank you for this great framework! Your scroll implementation works well but I was wondering wether it is possible to support position: sticky?

Kind regars
Till


Sticky List headers
#2

Also looking for a solution to this. ++


#3

#4

It’s possible, after digging about, but you have to override the scroll content directive. The content directive creates a div with a class of scroll inside of itself and then adds the html you had inside the ion-content. So instead of scrolling the text or images you put inside of the ion-content, you’re basically moving the div class="scroll"

This is where the problem is. Since you’re moving the div class="scroll" and the actual content inside of it, position:sticky won’t work unless you override things. This is the best I can get right now with out digging into the Javascript.


#5

Is this the same as position:fixed? because I know that position fixed doesn’t work with transforms (this is a CSS issue); So setting a fixed position within that “scroll” div will not work as it has a webkit-transform applied to it.

I’m also trying to create a header stuck to the top when scrolling in a similar manner; However my implementation only requires one specific header/title - i’ve put the element outside of the div and change the css visibility based on position of that inner scroll (however my issue is i’m unable to return the scroll position that’s applied to that div).