Geek Answers Handbook

Hide navigation bar on scroll with Titan animation

Some applications (facebook, 9gag) have this feature. When the user scrolls the navigation bar, he gradually hides to the point that disappears. Then, when the user scrolls the navigation, he gradually shows himself (depending on the scroll speed).

We tried to implement this on Titanium by adjusting the height of the navigation view to the scroll event, but it lagged behind and very slowly:

scrollView.addEventListener('touchstart',function(e){ 
        boolScroll=true;
});

scrollView.addEventListener('scroll',function(e){ 
    if(boolScroll){
        auxScroll=e.y;
        boolScroll=false;
    }
    var bh=bars.height;
    var sh=scrolls.height;

    if(auxScroll<e.y)//scrolling down
        if(bars.height>appHeight*0.08){
            bars.height=bh-appHeight*0.005; //rate for hiding
            if(scrolls.height<appHeight*0.7)
                scrolls.height=sh+appHeight*0.005;//same rate to increase the height of the scroll
        }

    if(auxScroll>e.y)//scrolling up
        if(bars.height<appHeight*0.08){
            bars.height=bh+appHeight*0.005; 
            if(scrolls.height>appHeight*0.7)
                scrolls.height=sh-appHeight*0.005;  
        }
});

We also tried to do this with the translation of the animation into the view, but still slowly.

There is a solution for iOS in this matter. Any help would be appreciated!

enter image description here

+4
2

, , , ( , ) :

self.addEventListener('scroll',function(e){
        if(e.contentOffset.y > 20) NavigationWindow.window.hideNavBar();
        if(e.contentOffset.y < 20) NavigationWindow.window.showNavBar();
    });

NavigationWindow - Ti.UI.iOS.createNavigationWindow, self , , ( )

+1

More articles:


All Articles