Angular Sticky Header overlapping content

Question

I am trying to set up a sticky navbar in angular 6.

but it ends up looking like this, the main content overlapping with my navbar when scrolling down (it's like scrolling through under it) i have already tried setting the z-index of the nav class. i've also tried putting divs around the router-outlet in the app.component.html and offset it, but this didn't work either

glad for your help!

the scss for the navbar looks like this:

  .nav {
  position: sticky;
  top: 0;
  background: $primary-color;
  }
.nav-container {
  display: grid;
  grid-template-areas: 'home members list messages . loginForm';
  grid-template-rows: 50px;
  grid-template-columns: 100px 100px 100px 100px 1fr auto;
}

my app.component.html like this

<app-nav></app-nav>
<router-outlet></router-outlet>

the html of this particular page looks like this:

<div class="grid-container" style="height: 500px">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="main"></div>
  <div class="footer"></div>
</div>
<div class="grid-container" style="height: 500px">
</div>
<div class="grid-container" style="height: 500px">
</div>
<div class="grid-container" style="height: 500px">
</div>
<div class="grid-container" style="height: 500px">
</div>

and finally the scss of the page:

.grid-container {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-columns: 100px 1fr;
  grid-template-rows: 50px 1fr 50px;
}

Can Can · Accepted Answer · 2018-09-04T18:52:20

I faced a similar issue implementing @w11k/angular-sticky-things. The problem is, that you kinda remove the element from the page - all other content then takes the free space if the navigation goes sticky. I solved the issue by adding a spacer element that takes the height as soon as the element gets sticky. In order to do so calculate the height for your navbar element and assign the height to your spacer element:

 this.spacer.style.height = `${height}px`;

To get the height of the elment cal getBoundingClientRect on the navbars nativeElement. Fore more code take a look at my implementation: https://github.com/w11k/angular-sticky-things

Also I'm not sure if I would use position:sticky already: https://caniuse.com/#feat=css-sticky

Angular Sticky Header overlapping content

1 Answers