Ionic2-FixedScroll-Directive

Ionic2+ Fixed Scroll Directive for any component in mobile platforms (IOS, Android, Windows Phone). Not works with PWA yet.

Dependency

Needs Ionic 3 on the most recent versions.

Usage

Install: npm install ionic2-fixedscroll-directive --save

Import the ionic2-fixedscroll-directive module:

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app/app.component';
import { NgFixedScrollModule  } from 'ionic2-fixedscroll-directive';

@NgModule({
    declarations: [
        MyApp
    ],
    imports: [
        NgFixedScrollModule,
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp
    ]
})
export class AppModule {}

If you are using PageModule, you need to import the NgFixedScrollModule in your page module

import { NgFixedScrollModule  } from 'ionic2-fixedscroll-directive';

@NgModule({
  declarations: [
    MyPage
  ],
  imports: [
    IonicPageModule.forChild(MyPage),
    NgFixedScrollModule
  ],
  entryComponents: [
    MyPage
  ]
})
export class MyPageModule {}

Add the directive in any custom component

      <YourComponent fixed-scroll></YourComponent>

or with ionic native components

      <ion-searchbar fixed-scroll></ion-searchbar>

CSS and styles (Important)

This component adds a "fixed" class to the component in the moment that scrolls on page are on the component. BUT you need to setup your SASS file to add the fixed styles to your app.

Most common style is defining a top: 0; and position: fixed; css attributes.

Example (Using a searchbar component):

• In custom components, is a good practice create an separeted css class for ios|md|wp because the toolbar sizes are different

   your-page {
       ion-searchbar {
           &.fixed {
            @extend .toolbar; //optional
            position: fixed;
            top: 0; 

            transition: all 0.5s ease;

            &.searchbar-ios {
                transform: translateY(calc(#{$navbar-ios-height} + #{$cordova-ios-statusbar-padding}));
            }

            &.searchbar-md {
                transform: translateY(#{$navbar-md-height});
            }
            
            &.searchbar-wp {
                transform: translateY(#{$navbar-md-height});
            }
            z-index: 3; //zindex to put it on top of some ionic components
        }
       }
   }