Css 粘性位置不适用于safari mobile

我希望我的导航条是粘性的。css与我桌面上的Chrome浏览器配合使用效果很好，但当我试图在iPhone上查看它时，导航栏不再粘住。我曾试图弄乱身体溢出，并在其他元素上应用粘性位置，但无法使其工作。不知道什么地方出了问题，也不知道该怎么解决。我的应用程序使用Angular 6，希望避免使用JS或Jquery来解决此问题

app.component.html

<div class="contact-info"></div>

<app-navbar>
  <div class="outer">
    <div class="inner">
      <nav class="navbar">
        my navbar links......
      </nav>
    </div>
  </div>
</app-navbar>
<router-outlet></router-outlet>
<app-footer-bar></app-footer-bar>

<div class="outer" [class.sticky]="sticky" #stickyNavbar>

---

IE/Edge 15或更早版本不支持粘性。Safari版本6.1中支持-webkit-前缀

为了测试它，我在下面创建了一个代码片段，它在Safari、Chrome和MacOS上的Firefox上运行良好

.outer{
职位：-网络工具包粘性；
位置：粘性；
顶部：0px；
背景色：白色；
宽度：100%；
z指数：9；
}
身体{
高度：1000px；
}

我的导航栏链接。。。。。。

IE/Edge 15或更早版本不支持粘性。Safari版本6.1中支持-webkit-前缀

为了测试它，我在下面创建了一个代码片段，它在Safari、Chrome和MacOS上的Firefox上运行良好

.outer{
职位：-网络工具包粘性；
位置：粘性；
顶部：0px；
背景色：白色；
宽度：100%；
z指数：9；
}
身体{
高度：1000px；
}

我的导航栏链接。。。。。。

我找到了一个解决问题的方法，使用角度编码和固定位置。如果有人知道如何使用css sticky position实现这一点，那将不胜感激

navbar.component.html

<div class="contact-info"></div>

<app-navbar>
  <div class="outer">
    <div class="inner">
      <nav class="navbar">
        my navbar links......
      </nav>
    </div>
  </div>
</app-navbar>
<router-outlet></router-outlet>
<app-footer-bar></app-footer-bar>

<div class="outer" [class.sticky]="sticky" #stickyNavbar>

navbar.component.ts

.outer {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  background-color: white;
  width: 100%;
  z-index: 9;
}

.sticky {
  position: fixed;
  top: 0;  
}

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef, HostListener } from '@angular/core';

export class NavBarComponent implements OnInit {

@ViewChild('stickyNavbar') navbarElement: ElementRef;

sticky: boolean = false;
navbarPosition: any;

  ngAfterViewInit() {
    this.navbarPosition = this.navbarElement.nativeElement.offsetTop;
  }

@HostListener('window:scroll', ['$event'])
  handleScroll() {
    const windowScroll = window.pageYOffset;
    if(windowScroll > this.navbarPosition) {
      this.sticky = true;
    } else {
      this.sticky = false;
    }
  }
}

---

我找到了一个解决问题的方法，使用角度编码和固定位置。如果有人知道如何使用css sticky position实现这一点，那将不胜感激

navbar.component.html

<div class="contact-info"></div>

<app-navbar>
  <div class="outer">
    <div class="inner">
      <nav class="navbar">
        my navbar links......
      </nav>
    </div>
  </div>
</app-navbar>
<router-outlet></router-outlet>
<app-footer-bar></app-footer-bar>

<div class="outer" [class.sticky]="sticky" #stickyNavbar>

navbar.component.ts

.outer {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  background-color: white;
  width: 100%;
  z-index: 9;
}

.sticky {
  position: fixed;
  top: 0;  
}

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef, HostListener } from '@angular/core';

export class NavBarComponent implements OnInit {

@ViewChild('stickyNavbar') navbarElement: ElementRef;

sticky: boolean = false;
navbarPosition: any;

  ngAfterViewInit() {
    this.navbarPosition = this.navbarElement.nativeElement.offsetTop;
  }

@HostListener('window:scroll', ['$event'])
  handleScroll() {
    const windowScroll = window.pageYOffset;
    if(windowScroll > this.navbarPosition) {
      this.sticky = true;
    } else {
      this.sticky = false;
    }
  }
}

---

Safari版本？您使用什么版本的Safari？标题中有表格吗？这可能是一个表格问题[根据caniuse.com的说法，sticky和tables有很多问题]，或者你的css中有两个位置规则。我建议删除第二条规则并重新测试它，看看错误是否仍然存在occurs@RachelGallen没有桌子。如果你在下面看到我的评论，我知道我的问题是什么，但我不知道如何解决这个问题。我的粘性仅限于navbar组件，但我希望它对我的整个应用程序都是粘性的，无论我正在查看哪个组件。@CuongVo您使用的是React还是其他什么？（那是一个不同的蜡球！）如果是这样，你必须让组件有一个固定的位置，我为我开发的第一个应用程序制作了一个底部选项卡栏，但我先研究了其他人的代码，因为我只是在学习。你也可以这样做。抱歉，我无法提供更多帮助Safari版本？您使用的Safari版本是什么？标题中有表格吗？这可能是一个表格问题[根据caniuse.com的说法，sticky和tables有很多问题]，或者你的css中有两个位置规则。我建议删除第二条规则并重新测试它，看看错误是否仍然存在occurs@RachelGallen没有桌子。如果你在下面看到我的评论，我知道我的问题是什么，但我不知道如何解决这个问题。我的粘性仅限于navbar组件，但我希望它对我的整个应用程序都是粘性的，无论我正在查看哪个组件。@CuongVo您使用的是React还是其他什么？（那是一个不同的蜡球！）如果是这样，你必须让组件有一个固定的位置，我为我开发的第一个应用程序制作了一个底部选项卡栏，但我先研究了其他人的代码，因为我只是在学习。你也可以这样做。对不起，我帮不上什么忙了。我不认为这是我的问题，因为我在另一个组件内的一些导航药丸上有我的粘性位置。但为了回答这个问题，我可以在手机上打开它，我可以在我的版本上打开它：Mozilla/5.0（iPhone；CPU iPhone OS11_4_1，如MacOS X）AppleWebKit/605.1.15（KHTML，如Gecko）version/11.0 Mobile/15E148 Safari/604.1Ok。你的密码告诉我发生了什么。导航栏是粘性的，但仅限于导航栏组件的主体。如何使我的导航栏组件对我所有的组件都具有粘性？我不认为这是我的问题，因为我的粘性位置是在另一个组件中处理一些导航丸。但为了回答这个问题，我可以在手机上打开它，我可以在我的版本上打开它：Mozilla/5.0（iPhone；CPU iPhone OS11_4_1，如MacOS X）AppleWebKit/605.1.15（KHTML，如Gecko）version/11.0 Mobile/15E148 Safari/604.1Ok。你的密码告诉我发生了什么。导航栏是粘性的，但仅限于导航栏组件的主体。如何使导航栏组件对所有组件都具有粘性？