Спрятать ion-nav-bar на свитке в ионном

Просто хотел внести вклад для пользователей Ionic 2 с тем, что я сделал.

Вам просто нужно добавить его в свой проект. После этого вы можете настроить компонент HeaderScroller:

header-scroller.ts:

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

/**
 * Show/Hide header based on page scroll position.
 */
@Directive({
    selector: '[header-scroller]'
})
export class HeaderScroller {

    /**
     * @var number Distance from page top to trigger the hide/show functionality.
     */
    protected _topTriggeringDistance: number = 100;

    /**
     * @var string Distance to keep between the top and the content when the header is hidden.
     */
    protected _topContentDistance: string = '10px';

    /**
     * @var number Animation transition, in seconds, for showing/hiding the header.
     */
    protected _animationTransition: number = 0.6;

    /**
     * @var HTMLElement Content element (<ion-content>).
     */
    protected _el: any;

    /**
     * Initializes.
     *
     * @param el ElementRef Directive selector.
     * @return void
     */
    constructor(el: ElementRef) {

        this._el = el.nativeElement;
    }

    /**
     * Binds the scroller.
     *
     * @return void
     */
    ngOnInit() {

        // Set animation transition
        this._el.previousElementSibling.style.transition = 'top ${this._animationTransition}s ease-in-out';

        this._bindScroller(this._el.children[0]);
    }

    /**
     * Listen to scroll events in <scroll-content> component.
     *
     * @param el HTMLElement Scroller element (<scroll-content>).
     * @return void
     */
    protected _bindScroller(el): void {

        el.addEventListener('scroll', event => {

            let scroller = event.target,
                header = event.target.parentElement.previousElementSibling;

            if (event.target.scrollTop > this._topTriggeringDistance && header.style.top != '0') {
                scroller.style.marginTop = this._topContentDistance;
                header.style.top = '-${header.offsetHeight}px';
            } else if (event.target.scrollTop <= this._topTriggeringDistance && header.style.top == '-${header.offsetHeight}px') {
                header.style.top = '0';
                scroller.style.marginTop = '${header.offsetHeight}px';
            }
        });
    }
}

На странице page.ts:

import { HeaderScroller } from 'path/to/header-scroller';

В зависимости от вашей версии Ionic (бета или стабильная) вы должны добавить:

// Ionic 2 beta (page.ts)
@Component({
    directives: [ HeaderScroller ]
})

// Ionic 2 new (app.module.ts) -untested, but it should work-
@NgModule({
    declarations: [
        HeaderScroller
    ],
    entryComponents: [
        HeaderScroller
    ]
})

И в вашем page.html

<ion-content header-scroller>

Надеюсь, поможет!