Липкая позиция не работает с Safari Mobile - PullRequest
Новая
       6

Липкая позиция не работает с Safari Mobile

0 голосов
/ 24 сентября 2018

Я хочу, чтобы мой navbar был липким.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;
}

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Ну, я нашел решение моей проблемы, используя угловое кодирование и фиксированное положение.Если кто-то знает, как это сделать с помощью позиции css sticky, то это будет оценено.

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;
    }
  }
}
0 голосов
/ 24 сентября 2018

Sticky не поддерживается в IE / Edge 15 или более ранних версиях.Поддерживается в 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>
...