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

Ionic Framework ionic-v3
1

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?

2

http://plnkr.co/edit/15TMtAwE6eBYAzJTL3Gp?p=preview Sloved my issue :slight_smile:

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

TS:

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
3

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

4

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
   <ion-scroll>
       //Scrollable Content
   </ion-scroll>
   //Non Scrollable Content Bottom
</ion-content>

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

5

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;”

6

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.