由于溢出滚动，固定在滚动div内的位置正在移动

Question

我的目标是固定元素h5，当我在离子卷轴中水平滚动时，它不应移动。

我使用离子固定的元素进行固定：

我尝试过的：

 -webkit-overflow-scrolling: auto !important;

不好，因为禁用了平滑滚动。

这是我的代码：

  <ion-scroll no-bounce overflow-scroll="false" #scroll scrollX="true" scrollY="true" style="height:100vh;">
<ion-grid>
  <ion-row nowrap class="time-bar" #box>
    <div class="line" [ngStyle]="{'left': leftTime}"></div>
    <p *ngFor="let i of day">{{i}}</p>
  </ion-row>
  <ion-row class="location">
    <h5 ion-fixed>Café & Bar </h5>
    <div class="gig" *ngFor="let i of dayselect">
      <div class="gig-box" *ngFor="let d of i['cafe']" [ngStyle]="{'width': widthGig, 'left': leftGig}">
        <img src="assets/imgs/2.png" alt=""> {{setGigs(d.start,d.length)}}
        <h4>{{d.name}}</h4>
        <p>{{d.playTimes}}</p>
      </div>
    </div>
  </ion-row>
  <ion-row class="location">
    <h5 ion-fixed>test</h5>
    <div class="gig" *ngFor="let i of dayselect">
      <div class="gig-box" *ngFor="let d of i['test']; let j = index" [ngStyle]="{'width': widthGig, 'left': leftGig}">
        <img src="assets/imgs/2.png" alt=""> {{setGigs(d.start,d.length)}}
        <h4>{{d.name}}</h4>
        <p>{{d.playTimes}}</p>
      </div>
    </div>
  </ion-row>
</ion-grid>