固定位置不适用于 Safari 移动设备答案

【问题标题】：Sticky position not working with safari mobile固定位置不适用于 Safari 移动设备
【发布时间】：2018-09-24 18:59:55
【问题描述】：

我希望我的导航栏具有粘性。 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>

navbar.component.css

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

【问题讨论】：

Safari 版本？
你用的是什么版本的 Safari？
您的标题中有表格吗？这可能是一个表格问题[根据 caniuse.com 的说法，粘性和表格存在很多问题]，或者您在 css 中有 2 条位置规则。我建议删除第二条规则并重新测试它以查看错误是否仍然存在
@RachelGallen 没有桌子。如果您在下面看到我的评论，我想出了我的问题，但我不知道如何解决问题。我的粘性仅限于导航栏组件，但无论我正在查看什么组件，我都希望它对我的整个应用程序都具有粘性。
@CuongVo 你在用 React 还是什么？（那是一个不同的蜡球！）如果是这样，你必须让组件有一个固定的位置，我为我开发的第一个应用程序做了一个底部标签栏，但我先研究了别人的代码，因为我只是在学习.你可能也可以这样做。抱歉，我无法提供更多帮助

标签： css angular navbar

【解决方案1】：

IE/Edge 15 或更早版本不支持 Sticky。从 6.1 版开始在带有 -webkit- 前缀的 Safari 中受支持。

为了测试它，我在 sn-p 下创建了它，它在 MacOS 上的 Safari、Chrome、Firefox 上运行良好。

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

body {
height: 1000px;
}

<body>
  <div class="outer">
    <div class="inner">
      <nav class="navbar">
        my navbar links......
      </nav>
    </div>
  </div>
</body>

【讨论】：

我不认为这是我的问题，因为我在另一个组件内的一些导航药片上工作时处于固定位置。但要回答这个问题，我可以在我的手机上提取这个，我可以为我的版本提取这个：Mozilla/5.0(iPhone; CPU iPhone OS11_4_1 like MacOS X) AppleWebKit/605.1.15 (KHTML, like Gecko)版本/11.0 手机/15E148 Safari/604.1
好的。你的代码向我揭示了发生了什么。导航栏是粘性的，但仅限于我的导航栏组件的主体。如何让我的导航栏组件对我的所有组件都具有粘性？

【解决方案2】：

好吧，我找到了一种解决方法，使用角度编码和固定位置来解决我的问题。如果有人知道如何使用 css 粘性位置执行此操作，那将不胜感激。

navbar.component.html

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

navbar.component.css

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

navbar.component.ts

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;
    }
  }
}

【讨论】：