CODEWITHSUNDEEP
cssangularnavbar
Cuong Vo
Cuong Vo

Reputation: 289

Sticky position not working with safari mobile

I want my navbar to be sticky. The css works fine with Chrome on my desktop but when I try to view it on my iPhone the navbar no longer sticks. I've tried to mess with the body overflow and applying the sticky position on other elements but can't get it to work. Not sure what is wrong or what to do to fix this. I am using Angular 6 for my app and would like to avoid using JS or Jquery to solve this issue.

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

Upvotes: 1

Views: 8339

Answers (2)

Cuong Vo
Cuong Vo

Reputation: 289

Well I found a work around for my problem using angular coding and a fixed position. If someone knows how to do this with the css sticky position then that would be appreciated.

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

Upvotes: 0

Shubham Gupta
Shubham Gupta

Reputation: 2646

Sticky is not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.

To test it I created below snippet which is working fine on Safari, Chrome, Firefox on 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>

Upvotes: 3

Related Questions