Ionic-framework: Autohide navbar when scrolling

[doorman02]

When the user is scrolling down is there a feature to hide the navbar to show more content and showing it again when scrolling up or tabbing?

Thanks!

[CoenWarmer]

That'd be a really cool feature to have!

[CoenWarmer]

Actually, this already exists. Check out the official Ionic demo: http://codepen.io/ionic/pen/hIzFp

[somethingnew2-0]

Thanks @CoenWarmer! I think that demo closes this issue. :wink:

[CoenWarmer]

:+1:

[doorman02]

Hi, thanks for your quick reply! Since this behaviour is pretty handy on mobile phones I was thinking more of an integrated feature e.g. boolean property on the nav bar element:

ion-nav-bar class="bar-positive" hide-on-scroll="true"

Also if infinite scrolling is used the navbar should be shown any time you scroll up again or tab the page, in the demo you need to scroll all the way up.
Thanks :)

[kaililleby]

the "display nav bar on scroll up" would be great - any one seen support for this?

[kaililleby]

hi @doorman02 , forked the codepen demo mentioned above and added display of nav bar when scrolling up - http://codepen.io/kaililleby/pen/HALnJ

[doorman02]

Nice, thanks!

On 5 June 2014 19:25, Ka Lilleby [email protected] wrote:

hi @doorman02 https://github.com/doorman02 , forked the codepen demo
menitoned above and added display of nav bar when scrolling up -
http://codepen.io/kaililleby/pen/HALnJ

—
Reply to this email directly or view it on GitHub
https://github.com/driftyco/ionic/issues/1381#issuecomment-45262898.

[kaililleby]

this might be of interest - http://wicky.nillia.ms/headroom.js/ - comes with angular directives

[marcelodelta]

kaililleby

I performed some tests using ionic in headroom and have not had success. The action of the scroll does not work.

Do You made ​​it work?

[kaililleby]

well.. i havent tried it yet :)

[kaililleby]

sorry late reply..
i guess it would be possible, though i dont have any code to show..

2014-09-18 7:55 GMT+02:00 tjmiao22 [email protected]:

hi kailileby
i like your code,
izzit possible to make it for footer?
i am new for angularjs =D

—
Reply to this email directly or view it on GitHub
https://github.com/driftyco/ionic/issues/1381#issuecomment-55997937.

_Kai Lilleby_
Systemansvarlig
Styreplan @ Systemfabrikken AS
| m: 930 22 179 | e: [email protected] | w: www.styreplan.no

[tjmiao22]

@kaililleby is ok.. yes is possible!! i success use your code to make hide footer.. really thank you ^^

[felquis]

Where can I find the docs about hide-on-scroll?

[frey1esm]

@kaililleby - Is it possible to use this with ion-nav-bar?

http://codepen.io/kaililleby/pen/HALnJ

[mhartington]

@frey1esm yes it is possible, you would just need to modify the directive to select the correct dom elements.

[diegoponciano]

How can I make this work on Ionic v2?

[gauravsaini03-zz]

@mhartington Is this possible via some config in toobar API in Ionic 2 ?

[AmitMY]

@diegoponciano @gauravsaini03 Did you manage to get it working in ionic 2?

[LufoX11]

For Ionic 2 users.

This is a directive I've made to deal with this. You just need to add it to your project. You can customize HeaderScroller component after that:

header-scroller.ts:

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

/**
 * Show/Hide header based on page's 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's 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`;
            }
        });
    }
}

In your page.ts:

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

Depending on your Ionic version (beta or stable), you must add:

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

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

And in your page.html

<ion-content header-scroller>

Hope it helps!

[diegoponciano]

@AmitMY I stopped working on that project, and never had the chance to try again.

[lucasbasquerotto]

@shamank Thanks for the directive. I've just made a few changes because children[0] was not returning the correct element (children[1] worked). I've also made the header be shown when I scroll up. Now it's working fine:

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

@Directive({
    selector: '[header-scroller]'
})
export class HeaderScroller implements OnInit {
    /**
     * @var number Distance from page top to trigger the hide/show functionality.
     */
    private triggerDistance: number = 100;

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

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

    /**
     * @var number The last value of scrollTop.
     */
    private lastScrollTop: number = null;

    /**
     * @var HTMLElement Content element (<ion-content>).
     */
    private el: HTMLElement;

    /**
     * Initializes.
     *
     * @param el ElementRef Directive's selector.
     * @return void
     */
    constructor(el: ElementRef) {
        this.el = el.nativeElement;
    }

    /**
     * Binds the scroller.
     *
     * @return void
     */
    public ngOnInit() {
        let el = this.el;
        let prevEl = el && <HTMLElement>el.previousElementSibling;
        let style = prevEl && prevEl.style;
        let children = el && el.children;
        let childList = children && <Array<HTMLElement>>Array.from(children);

        if (style) {
            // Set animation transition
            style.transition = `top ${this.transition}s ease-in-out`;
        }

        let scrollList = (childList || []).filter(e => e.classList.contains('scroll-content'));
        let scroll = scrollList.length ? scrollList[0] : null;

        if (scroll) {
            this.bindScroller(scroll);
        }
    }

    /**
     * Listen to scroll events in <scroll-content> component.
     *
     * @param el HTMLElement Scroller element (<scroll-content>).
     * @return void
     */
    private bindScroller(el: HTMLElement): void {
        el.addEventListener('scroll', event => {
            let scroller = <HTMLElement>event.target;
            let header = <HTMLElement>scroller.parentElement.previousElementSibling;
            let scrollTop = scroller.scrollTop;
            let headerStyle = header.style;
            let headerTop = parseInt(headerStyle.top);
            let offsetHeight = header.offsetHeight;
            let scrollerStyle = scroller.style;
            let lastScrollTop = this.lastScrollTop || 0;

            let show = ((scrollTop <= this.triggerDistance) || (scrollTop < lastScrollTop));
            show = show && (headerTop < 0);
            let hide = ((isNaN(headerTop) || (headerTop >= 0)) && (scrollTop > this.triggerDistance));
            hide = hide && (scrollTop > lastScrollTop);

            if (show) {
                headerStyle.top = '0';
                scrollerStyle.marginTop = `${offsetHeight}px`;
            } else if (hide) {
                scrollerStyle.marginTop = this.marginTop;
                headerStyle.top = `-${offsetHeight}px`;
            }

            this.lastScrollTop = scrollTop;
        });
    }
}

[damonsomu]

In real device the effect is slow.

[lucasbasquerotto]

@damonsomu You can change the transition time to 0 to see if it is better.