sticky-top不适用于Angular8 / safari

Question

我想使用bootstrap4的Sticky top。

它在Chrome / Firefox上运行良好，但在Mac或iPhone上的Safari上运行不正常。我知道它不适用于Angular组件，但我不知道原因。如何使它正常工作？

---

header.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

header.component.html

<div class="sticky-top">
  <nav class="navbar navbar-dark bg-primary">
    <a href="#" class="navbar-brand">TEST</a>
  </nav>
  <nav class="navbar navbar-light bg-success">
    <a class="nav-link" routerLink="/">
      test
    </a>
    <div href="#" class="navbar-brand mx-auto">test</div>
    <div class="nav-link" href="#"></div>
  </nav>
</div>

app.component.html

<app-header></app-header>

<br />
<br />
<br />
<br />
...

---

stackblitz

• Safari：13.0.3（14608.3.10.10.1）
• 角度：8.2.14
• 引导程序：4.3.1

Answer 1

粘顶]

将一个元素从一个边缘到另一个边缘放置在视口的顶部，但只有在您滚动经过它之后才可以。 .sticky-top实用程序使用CSS的位置：粘性，并非所有浏览器都完全支持粘性。

IE11和IE10将呈现

position: sticky为position: relative。因此，我们将样式包装在@supports查询中，从而将粘性限制为仅可以正确呈现样式的浏览器。

而且Safari也是如此。

事实上，根据CanIUse，Safari仅支持-webkit-前缀。

因此，您可能希望将其添加到CSS类并将其应用于div。

尝试在header.component.css中添加此CSS类：

.sticky-top {
  position: -webkit-sticky;
}