search

djett41 / ionic-scroll-sista

An Ionic plugin that hides the header/tabs while scrolling
MIT License
125 stars 38 forks source link

losing 60px when scrolling back to top #15

Open Taylorsuk opened 9 years ago

Taylorsuk commented 9 years ago

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.

djett41 commented 8 years ago

@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/