如何制作粘性的Angular Material垫工具栏？

Question

我一直在尝试实现位于初始导航栏之后的mat-toolbar，但似乎无法正确实现。我尝试添加“位置固定”类。

如果初始位置位于页面顶部，则不是这样，这将起作用。用户滚动到工具栏后，它应“粘贴”到页面顶部。

任何想法如何实现？我尝试过

的组合

.stickyBar { position: sticky; }

和固定位置，但没有运气。

有什么想法吗？谢谢

Answer 1

有些父元素的css属性溢出：隐藏，这会干扰位置：粘滞。 Here's帖子曾用于解决我的问题。

Answer 2

进行以下更改：

mat-toolbar{
  display: initial;
}
.stickyBar {
  position: sticky;
  top: 0;
}

添加具有特定高度的<mat-toolbar>父级后，粘性栏将仅停留在工具栏大小的范围内。换句话说，如果将工具栏的高度设置为10vh，则会看到粘滞栏在10vh的空间中保持停留状态。原因是粘性仅应用于父容器的视口份额。解决方法来自：Why is my position:sticky not working?