Fixed element above ion-content (clickable) but beneath relative content


#1

Hey!

This is kinda hard to explain but here goes:

I have a few elements that are (position:)fixed outside the ion-content that are not going to scroll with the rest of the content. The ion-content then has a padding-top attribute to show the underlying elements, since the main content of the page is scrolling on top of them. However, this also means that the fixed elements are not clickable, since the ion-content is laying on top of them.

I can fix the clickability issue by just setting the z-index of the fixed elements higher. The problem is that then they are also above the main content at all times, which is not gonna work. No matter the z-index of the main content it is still below the fixed ones.

Not entirely sure how to make this work, so any help is much appreciated. I hope I explained it well enough for you guys to understand as well :stuck_out_tongue:

Thanks!


#2

you can deactivate scrolling of the ion-content.
Set scroll=“false”

And add your fixed content on top of the ion-content and for the scrollable content use an ion-scroll in the ion-content.

Greets, bengtler