Angular 6 - CSS - 粘性标题

Question

我有 3 个元素：1 个工具栏、1 个地图、另一个工具栏。元素在另一个之下

我希望第二个工具栏保持在地图元素下方（顶部 400 像素处），但是当我向下滚动时，我的第二个工具栏将停在顶部 50 像素处，并将固定在第一个下方。

谢谢你的帮助

//组件.html

 <mat-toolbar color="primary" [ngStyle]="{'height':'50px'}"  class="fixed-header" >
</mat-toolbar>

<div class="custom-popup" id="frugalmap" ></div>

<mat-toolbar color="warn" class="mat-elevation-z5">
</mat-toolbar>

//组件.css

 .fixed-header {
position: fixed;
z-index:999;
}

#frugalmap {
height: 300px;
width: 100%;
margin-top:50px;
}

.mat-elevation-z5 {
position: relative;
z-index: 2;
}

原文由 Newbiiiie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在我回答你的问题之前，你 可以 考虑：

• 从 HTML 中删除静态样式。
• 使用合理的 z-index，这样你就不会得到像 z-index: 100000000 这样的 z-index。
• 仅在别无选择时使用 !important 。

---

由于我们无法通过 StackOverflow 的代码片段编写 Angular 代码，因此我使用 Stackblitz 编写了代码 - https://stackblitz.com/edit/angular-ii5tnn

要使职位具有粘性，您只需使用 position: sticky 以及额外的 top 或 bottom 顶级规则（在本例中）。例如：

 mat-toolbar {
  position: sticky;
  top: 50px
}

这样， mat-toolbar 将留在他的位置，直到我们通过它。

在我给出的例子中，我做了：

• 初始化了新的 Angular 6 并添加了 Material Angular。
• 添加了 mat-toolbar 和 [color="primary"] 并通过 CSS 将其设置为固定。
• 添加了 #frugelmap 自定义高度只是为了显示它。
• 添加了 mat-toolbar 和 [color="warn"] 并设置粘性规则（看下面）
• 添加了 #add-spacing 有很多 lorem ipsum 只是为了展示粘性效果。

以下 CSS 规则：

 mat-toolbar {
  --default-height: 50px;
}

mat-toolbar[color="primary"] {
  top: 0;
  position: fixed;
  height: var(--default-height);
}

mat-toolbar[color="warn"] {
  position: sticky;
  top: var(--default-height);
}

#frugalmap {
  height: 300px;
  background-color: #EEE;
}

原文由 Eliya Cohen 发布，翻译遵循 CC BY-SA 4.0 许可协议