Iphone нижняя панель навигации мобильного сафари: как заставить мою пользовательскую панель навигации при прокрутке придерживаться нижней части?

Question

На устройствах iPhone, когда вы прокручиваете веб-сайт на мобильном устройстве, панель навигации Apple анимируется вниз и исчезает.

У меня есть настраиваемая панель навигации, прикрепленная к нижней части - справа вверху панели навигации Apple.

Однако, когда я начинаю прокручивать, моя пользовательская панель навигации останавливается в том же месте, пока панель навигации Apple не исчезает, а затем внезапно не падает, чтобы заменить панель навигации Apple.

Вот мой код:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <div class="text-center md-visible">
      <a href="/" class="mob-logo ">resell</a>
    </div>
  </div>
  <div class="collapse navbar-collapse full-height" id="navbarSupportedContent" [ngClass]="field && field === mobileMenu.category ? 'show' : ''" >
    <app-category-nav-mobile
      *ngIf="payload.RootReducer.navigation_menu.fetched" [state]="field && field === mobileMenu.category"
      [menuItems]="payload.RootReducer.navigation_menu.items" (onNavigate)="navigateToCategory($event)" ></app-category-nav-mobile>
  </div>
  <div class="custom-dropdown type-mobile" id="navbarSupportedContent"
       [ngClass]="field && field !== mobileMenu.category && field !== mobileMenu.sell ? 'show' : ''" >
    <app-account-nav-mobile *ngIf="field === mobileMenu.account" (onSignOut)="signOut()"></app-account-nav-mobile>
  </div>
  <div class="custom-dropdown type-mobile bag" id="navbarSupportedContent"
  [ngClass]="field && field === mobileMenu.bag ? 'show' : ''" >
    <app-bag-nav-mobile *ngIf="field === mobileMenu.bag"
                        (onRemoveItem)="removeItem($event)"
                        (onClose)="close()"
                        [items]="payload.RootReducer.my_bag.items" [total]="payload.RootReducer.my_bag.sum" >
    </app-bag-nav-mobile>
  </div>
  <div class="custom-dropdown type-mobile login" id="navbarSupportedContent"
    [ngClass]="field && field === mobileMenu.login ? 'show' : ''" >
    <app-login-nav-mobile *ngIf="field === mobileMenu.login" (onClose)="close()"></app-login-nav-mobile>
  </div>
  <div class="md-visible">
    <ng-container>
      <div class="mobile-nav-overlay">
        <a (click)="expand(mobileMenu.category)" [ngClass]="field && field === mobileMenu.category ? 'active' : ''">
          <span>
            <img [src]="field && field === mobileMenu.category ? 'assets/images/close-nav.svg' : 'assets/images/bars.svg'"alt="" />
          </span>
          <span>{{field && field === mobileMenu.category ? 'Close' : 'Menu'}}</span>
        </a>
        <a (click)="expand(mobileMenu.login)" *ngIf="!authCheck.isAuthenticated()"
           [ngClass]="field && field === mobileMenu.login ? 'active' : ''">
          <span>
            <img src="assets/images/SignIn.svg" alt="" />
          </span>
          <span>Log In</span>
        </a>
        <a (click)="expand(mobileMenu.account)" *ngIf="authCheck.isAuthenticated()"
           [ngClass]="field && field === mobileMenu.account ? 'active' : ''">
          <span>
            <img src="assets/images/SignIn.svg" alt="" />
          </span>
          <span>Account</span>
        </a>
        <a (click)="field = mobileMenu.sell" [routerLink]="sellPageRouter()" [ngClass]="field && field === mobileMenu.sell ? 'active' : ''">
          <span>
            <img src="assets/images/sell.svg" alt="" />
          </span>
          <span>Sell</span>
        </a>
        <a (click)="expand(mobileMenu.bag)" [ngClass]="field && field === mobileMenu.bag ? 'active' : ''">
          <span>
            <img src="assets/images/MyBag.svg" alt="" />
          </span>
          <span>My Bag({{ !payload.RootReducer.my_bag.items ? 0 : payload.RootReducer.my_bag.items.length }})</span>
        </a>
      </div>
    </ng-container>
  </div>
</nav>

.mobile-nav-overlay {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 99999;
  background: $colorTheme;
  height: 10%;

  @include displayFlex;
  @include alignItems(center);

  border-top: 1px solid #d2cec5;
}

let lastScrollTop = 0;
$(window).scroll(function(event) {
   let offset = $(this).scrollTop();
   const navbar = document.getElementsByClassName('mobile-nav-overlay')[0] as HTMLElement;
   const scrollPosition = Math.round(window.scrollY);

   if (scrollPosition > 0) {
    navbar.style['margin-bottom'] = offset;
   }
   lastScrollTop = offset;
});