CSS - 固定navbarを持つことができません

Question

私はIONIC2フレームワークを使ってアプリケーションを開発していますが、今度は画面の上部に固定された固定のNavbarを作成する必要があります。しかし、私は仕事をするのに十分な運がなかった。

これまでのところ、これはクロムで完璧に機能します。しかし、私はそれをデバイス（Safari）で実行すると、全体のビューがスクロール可能になります。これまで

私の実装：

HTML：

 <ion-content id="contentPadding" class="outlet"> 
     <div class="top"> 
     <div class="imagebk" [ngStyle]="{'background-image': 'url('+outlet.mainPhoto?.url+')'}"><div class="bk"></div></div> 
     <div class="fixedTitle"> 
      <div class="outletName">{{outlet.resName | uppercase}}</div> 
     </div> 
     <ion-row id="rowPadding"> 
      <ion-col id="overviewTab" width-50> 
      <div>TAB 1</div> 
      </ion-col> 

      <ion-col id="menuTab" (click)="showModal(outlet)" width-50> 
      <div>TAB 2</div> 
      </ion-col> 
     </ion-row> 
     </div> 
     ..... 
    <div class="secondDiv"></div> 
    </ion-content> 

CSS：私はデバイス（iOS版）全ページ/上下にスクロール上記の実装では

.top{ 
    position: fixed !important; 
    top:0; 
    } 

    .fixedTitle{ 
     position: fixed; 
     width: 100%; 
     text-align: center; 
     margin-top: 13%; 
     left: 50%; 
     z-index: 101; 
     transform: translateX(-50%); 
    } 

    #rowPadding{ 
    padding:50% 0 0vh 0; 
    position: fixed; 
    transform: translateX(0px); 
    z-index: 5; 
    } 

上下に移動し、navBarが上に固定されません。

Answer 1

ion-toolbarで試してみませんか？ Ionic2 docsによる：

ツールバーは、コンテンツの上または下に配置された汎用バーです。 Navbarとは異なり、ツールバーはサブヘッダーとして使用できます。 ツールバー を<ion-header>または<ion-footer>に配置すると、ツールバーはそれぞれに固定された のままです。

はまた<ion-content>内に置かれたとき

は、ツールバーが コンテンツにスクロールしますことに気づきます。

ので、代わりの、あなたはion-toolbar内側に入れてみてくださいion-contentの内側にそのコードを配置しようとしているが、それを含めion-toolbarion-header内側とion-contentでない。