CSS - 不能有一個固定的導航條

我正在開發一個應用程序與IONIC2框架，現在我需要創建一個固定的導航欄，堅持到屏幕的頂部;然而，我沒有足夠的工作能力。CSS - 不能有一個固定的導航條

到目前爲止，它在鉻合金中完美工作;但是，當我在設備上運行它時（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：

.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; 
    }

隨着當我向上/向下滾動設備（iOS版）整個頁面就上述實施上升和下降，navBar不堅持頂部。

來源

2016-08-15 Hamza L.

我不認爲你需要爲.top的任何子節點設置位置屬性，因爲它們繼承了它的樣式。 – Radmation

這是真的，但事情是，我已經做了很多試驗，而上面那個是最新版本。 –

你爲什麼不試試ion-toolbar？根據Ionic2 docs：

工具欄是位於內容之上或之下的通用條。與Navbar不同，工具欄可用作副標題。 當工具欄被放置在<ion-header>或<ion-footer>中時，工具欄會保留固定在其各自位置。

還要注意，

當置於內<ion-content>，工具欄將與內容滾動。

因此，而不是試圖把該代碼ion-content裏面，你應該把它ion-toolbar裏面試試，但包括ion-toolbar內ion-header和不在ion-content。

來源

2016-08-16 08:12:18 sebaferreras

感謝您的指點，使用'ion-toolbar'這對我來說並不方便，因爲我正在設計新的頭文件是完全自定義的，它包含背景圖片，自定義高度....所以我需要知道IONIC如何使用CSS修正它的導航欄 –

CSS - 不能有一個固定的導航條

回答

相關問題