Question

我希望导航栏保持粘性。 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;
}

Answer 1

IE / Edge 15或更早版本不支持

Sticky。 Safari从6.1版开始，带有-webkit-前缀。

要对其进行测试，我在下面的代码段中创建了该代码段，该代码段在Safari，Chrome和Firefox的MacOS上都可以正常运行。

.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>

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

粘性位置不适用于Safari移动设备

2 个答案: