Question

我正在开发一个带有IONIC2框架的应用程序，现在我需要创建一个固定在屏幕顶部的固定导航栏;但是，我没有幸运能够工作。

到目前为止，它在chrome中完美运行;但是，当我在设备（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不会粘在顶部。

Answer 1

为什么不尝试使用ion-toolbar？根据{{3}}：

工具栏是位于内容上方或下方的通用栏。与Navbar不同，工具栏可用作子标题。 当工具栏时放置在<ion-header>或<ion-footer>内，工具栏会保留固定在各自的位置。

另请注意

当放置在<ion-content>内时，工具栏将滚动显示内容。

所以，不要试图将代码放在ion-content中，而应该尝试将其放在ion-toolbar内，但在ion-toolbar内包含ion-header和<{1}} ion-content中的强>不。

CSS - 无法拥有固定的navBar

1 个答案: