粘顶

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

如Bootstrap Docs中所述：

粘顶

在视口顶部，从一个边缘到另一个边缘定位一个元素，但只有在您滚动经过该元素之后。 .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;
  position: sticky;
}

这是您推荐的Sample Demo。

sticky-top不适用于Angular8 / Safari

1 个答案:

粘顶