ionic-scroll-sista
ionic-scroll-sista copied to clipboard
losing 60px when scrolling back to top
The hiding header is working perfectly however I lose approx 60px from the top of my ion-content
when scrolling down.
I am using the following at the top of my view.
<ion-view title="Exercises">
<ion-nav-bar class="bar-gradient">
<ion-nav-back-button class="button-clear">
<i class="ion-ios-arrow-thin-left"></i>
</ion-nav-back-button>
<div class="bar bar-subheader bar-gradient">
<p>Adding exercises to: <strong>{{programme.programmeTitle}}</strong></p>
</div>
<ion-nav-buttons side="left" class="home-buttons" hide-back-button="true">
<button ui-sref="app.programmes" class="button button-icon icon ion-ios-arrow-left"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon" ng-click="openProgrammeModal(programmes)">
<i class="icon ion-ios-email-outline"></i>
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content id="content" scroll-sista has-bouncing="false" class="has-subheader main content exercise-main" delegate-handle="exerciseContent">
This only occurs on the ios simulator and device - works ok in the browser. When inspecting element through the simulator you can see the calculated top:
value change (losing 60px
) as soon as I scroll down.
@Taylorsuk I'm suspecting it has something to do with the way your ionic components are set up, especially the subheader inside of the nav-bar..
ion-nav-bar is supposed to be declared outside of your ion-view rather than inside. Then inside the ion-view is where you would only override the button or title directives rather than the actual ion-nav-bar.
Aside from that subheaders are also usually declared inside outside of the ion-nav-bar. When Ionic compiles your directives It's most likely moving your subheader outside of ion view and into the nav-bar section, which may be messing up the way the items are stacked and how scroll sista selects elements.
I would take a look at the ionic navigation docs and try reorganizing your layout http://ionicframework.com/docs/api/directive/ionNavView/