Image on nav.push(NextPage) shows up before transition

Hi guys, I’ve got a page I’m building where I’d like the top half of the page to be static content and the bottom half to be a scrollable list. I thought I could just put a div in there and an ion-content beneath, but it isn’t working well because the div contents render prematurely when navigating to the new page.

Is there a better way?

Here’s a gif of what i’m seeing here:

Basically I’m pushing a new page onto the NavController. the new page has a template like this:

<ion-navbar *navbar swipe-back-enabled="true">
	<button menuToggle>
		<ion-icon name="menu"></ion-icon>
	<ion-title>Zone {{zone.valve}}</ion-title>

<div class="header-container" [ngStyle]="{'background-image': 'url(' + showcaseImage() + ')'}">

			<ion-input type="text" [(ngModel)]=""></ion-input>

but as you can see in the gif, the image inside the .header-container div shows up before the page does.

Try put your image div inside the ion-content

Yes, that works. But I put it outside of ion-content because I do not want it to scroll. I only want the lower part (the part in ion-content) to scroll.

Isn’t there a non-scrolling equivalent to ion-content that I can wrap the top part in? Then I could separate the two sections like I want.

Hi jasonwaters
just use ion-fixed

    <div ion-fixed>
        <p>fixed content</p>
   <p>scroll content</p>