Angular Sticky Header重叠内容

Question

我正在设置角度为6的粘性导航栏。

但最终看起来像这样，当向下滚动时，主要内容与我的导航栏重叠（就像在它下面滚动一样） 我已经尝试设置nav类的z-index。 我也尝试在app.component.html中的路由器插座周围放置div并将其抵消，但这不起作用

很高兴为您提供帮助！

导航栏的scss如下所示：

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

我的app.component.html就像这样

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

这个特定页面的html如下所示：

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

最后是页面的scss：

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

Answer 1

我在实施 @ w11k / angular-sticky-things 时遇到了类似的问题。问题是，您有点从页面中删除了元素-如果导航变得很粘滞，那么所有其他内容都会占用可用空间。我通过添加一个间隔元素解决了这个问题，该元素在粘性时会立即变高。为此，请计算导航栏元素的高度，并将该高度分配给间隔元素：

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

要获取导航栏nativeElement上元素cal getBoundingClientRect的高度。更多代码请看我的实现： https://github.com/w11k/angular-sticky-things

我也不确定是否要使用position：sticky： https://caniuse.com/#feat=css-sticky