Блог

В моем приложении Angular есть два липких элемента: один — заголовок, а другой — DIV.

я использую bootstrap, поэтому класс sticky имеет следующее свойство css:

 .sticky {
    position: sticky;
    z-index: 3;
    top: 0;
}
  

Проблема в том, что на самом деле залипает только липкий div, в то время как заголовок не залипает..

Мой заголовок выглядит так:

 <header class="section-header bg-white sticky">
  <ngb-progressbar *ngIf="isLoading" class="indeterminate" type="primary" [animated]="true" [value]="50" height=".2rem"></ngb-progressbar>
  <section class="header-main">
    <div class="container">
      
      <div class="d-flex justify-content-between">

        <a href="" appHref class="brand-wrap" routerLink="/">
          <img class="logo" src="assets/images/logo.png" />
        </a>
        <div class="float-md-right">
          <div *ngIf="cart" class="widget-header">
            <a routerLink="/cart">
              <i class="material-icons">shopping_cart</i>
              <span class="icon-text">Carrello</span>
            </a>
            <span
              *ngIf="count != 0"
              class="badge badge-pill badge-danger notify"
              >{{ count }}</span
            >
          </div>
          <div class="widget-header" *ngIf="account">
            <a href="#" appHref>
              <i class="material-icons">person</i>
              <span class="icon-text">Accedi</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</header>
  

В то время как мои липкие элементы, подобные этому:

 <section class="section-menu sticky">
  <nav class="nav justify-content-center">
    <a
      class="nav-link menu"
      href="#"
      appHref
      *ngFor="let men of menu; let i = index"
      (click)="clickMenu(men, i)"
      [class.active]="menuSelected === i"
      >{{ men.desc }}</a
    >
  </nav>
</section>
  

Но на iphone наклеивается только раздел, в то время как в Google Chrome все работает правильно…

Как вы могли видеть на следующем GIF, заголовок является липким, .section-menu который наклеивается при прокрутке до заголовка, в то время как на iphone заголовок статичен, и единственным липким элементом является .section-menu

Для Safari попробуйте использовать:

 .sticky {
position: -webkit-sticky;
position: sticky;
z-index: 3;
top: 0;
  

}

Это в документах разработчика Mozilla.

Вы можете использовать это…Липкий заголовок

Я использовал условие, если прокрутка окна <150, затем добавьте класс «sticky».