Angular Sticky Header 重叠内容答案

【问题标题】：Angular Sticky Header overlapping contentAngular Sticky Header 重叠内容
【发布时间】：2018-09-05 02:52:20
【问题描述】：

我正在尝试在 Angular 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;
}

【问题讨论】：

标签： html css angular header sticky

【解决方案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

【讨论】：