Angular Sticky Header重叠内容

Question

我试图在角度6中设置一个粘性导航栏。

但它最终看起来像这样，当我向下滚动时，主要内容与我的导航栏重叠（就像在它下面滚动一样）我已经尝试设置导航类的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时遇到了类似的问题。问题是，你有点从页面中删除元素 - 如果导航变粘，所有其他内容则占用可用空间。我通过添加一个间隔元素解决了这个问题，该元素一旦元素变粘就会占据高度。为此，请计算导航栏元素的高度并为spacer元素指定高度：

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

要获取元素cl qazxsw poi在navbars nativeElement上的高度。更多代码看看我的实现：qazxsw poi

另外我不确定我是否会使用position：sticky：getBoundingClientRect