Fixed (non-scrollable) content in Ionic + Vue mobile app

[sc0]

Hi,

is there any alternative to placing content inside an ion-header and ion-toolbar to make it fixed on top of the screen and not scroll?

I’m asking because I have some troubles with headers and toolbars with transparent backgrounds during page transitions.

Thanks and cheers!

[twestrick]

You might be running into a similar issue I had. Make sure all of your IonHeader content is within an IonToolbar. You can have multiple IonToolbar elements in your header. If there is some content outside a IonToolbar you will get weird transition issues.

Otherwise, yes, you can have a fixed header without using IonHeader. Just use normal CSS.

[twestrick]

I tried to find my previous post about this earlier but couldn’t. Here it is.

Non-scrollable area

I took a quick look and appears you did the same thing that I did at first which caused transition issues I found that you cannot have content in the header outside of IonToolbar, otherwise you’ll get content overlapping during transition. You either need to not use IonToolbar or make sure everything is wrapped in an IonToolbar. You can have multiple IonToolbar’s in an IonHeader which is what I did to fix it. Not sure if this is a bug in Ionic or not Try this: <IonHead…

[sc0]

Unfortunately I discovered that I still run into issues in certain situations. I’m wrapping everything fixed in headers and toolbars, but I still get the issue with multiple visible layers during transitions.

I have a funny quirk in my app. There are pages A, B and C.
A → B causes no issues
A → C causes no issues
B → C does the weird stacking thing
B → A (backward) causes no issues

The only difference with page B is that there’s only one toolbar present in the header. I tried adding a second, empty toolbar, but that didn’t fix the problem. I think it might be related to the height of the header. Perhaps it’s also a matter of what’s being stacked.

I was thinking about going with regular CSS, but I think the scrollbar will be an issue.

[twestrick]

I feel like there should be a solution without going regular CSS. Can you provide a StackBlitz with the issue?

[sc0]

I think I begin to grasp what’s going on.
ion-app, ion-page and ion-header don’t have a background but ion-toolbar and ion-content do.

I want to work with a gradient background, so this is complicating things. But I’m starting to see where the issues arise. It’s a matter of what elements are translated and being changed in opacity, how they’re stacked (forward vs backward), and if elements are involved that are more notable at reduced opacity than others.

A solution might be to give ion-page a background and write a custom animation. I’ll investigate further.

[twestrick]

What do you want to have a gradient background? I’ve got an IonHeader with one.

[sc0]

I was thinking the whole screen and put it on the body initially