How can i create a Div on top of a scroll content?

Hello i have a list and above this list is a div with a image.
I want that this div is getting always showed on top and the scroll is below this div.
How can i do that in ionic 2? Sloved my issue :slight_smile:

  <div #headerTag ion-fixed style="border: 1px solid red">
  <div #scrollableTag style="border: 1px solid blue">
    content scrollable.<br />


import { Component, ViewChild, ElementRef } from '@angular/core';

    export class MainPage
      @ViewChild('headerTag') headerTag: ElementRef;
      @ViewChild('scrollableTag') scrollableTag: ElementRef;

  //ion View did Enter get Height of fixed content
  ionViewDidEnter() {
        let offset = this.headerTag.nativeElement.offsetHeight;
        (<HTMLDivElement>this.scrollableTag.nativeElement).style.marginTop = offset + 'px';
1 Like

Did you try using <ion-scroll> to hold the scrolling content? Glad you have a solution.

Oh my Solution works only on Android Device. Could figure out whats wrong with ios. If I will Ill post it here.

Also <ion-content> has scroll enabled by default am i right?
That means with your Solution it should be something like this:

<ion-content scroll="false">
   //NonScrollable Content Top
       //Scrollable Content
   //Non Scrollable Content Bottom

Please correct me if Im wrong cause i didnt test it yet

Am I missing something here - the solutions suggested seems over complicated?

Why not just change the value for the margin-top on the ion-content to something larger than 56px. i.e.
style=“margin-top: 300px;”

Thats a bad solution. Reason: Different Screen Sizes.
Test your Solution an a 6" Device and on a 4" Device and youll see what i mean.