How to make details view like below link


#1

please help me i am stuck when i create below
1)slider in toolbar with view nav bar back and share button like

https://drive.google.com/file/d/0B0qdA1kUoM_hQVJ2eUNRMExaSm8/view?usp=sharing

  1. when i scroll up it will show proper nav bar like

https://drive.google.com/file/d/0B0qdA1kUoM_heHRzUDdxbzU2QjA/view?usp=sharing

Thanks


#2

You can add block with your header before <ion-content> directive. For example:


    <ion-view view-title="myTitle">
        <div ng-if = "showHeader"><!-- your header to show when user scrolling up --></div>
        <ion-content>

  1. You can use $ionicScrollDelegate to give scroll name to your page scroll and then using method ionicScrollDelegate.$getByHandle('yourScrollName') get it’s position when user scrolling page. This is example. But it’s better to get scroll by handle like this: $ionicScrollDelegate.$getByHandle('small').getScrollPosition().top and don’t do this: $ionicScrollDelegate.getScrollPosition().top. Because in first case you will get instance of only one scroll and it’s faster and better.

  2. Then you can look at scroll coordinates and this information is helpful to get know when user is scroll up. And when you detect that user is scrolling up you set variable showHeader to true and your header shows. Else set showHeader to false and your header will hide.

  3. Don’t forget call $ionicHistory.clearCache() in your scroll function because ionic cache your view and your header will cached to. In this case it will shows when user scrolls up and then it woudln’t hide.


#3

good stuff but still not working on ios device and also not same like my attachment