angular - 如何制作粘性角材料垫工具栏？

Question

我一直在尝试实现一个垫子工具栏，它位于初始导航栏之后，但我似乎无法做到正确。我尝试添加“位置固定”类。

如果初始位置在页面顶部但它不是，这将起作用。一旦用户滚动通过工具栏，它应该“粘”到页面顶部。

任何想法如何实现这一点？我试过组合

.stickyBar { position: sticky; }

和位置固定但没有运气。

有任何想法吗？谢谢

Answer 1

有具有 css 属性溢出的父元素：隐藏干扰位置：粘性。 这是用来解决我的问题的帖子。

Answer 2

进行以下更改：

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

一旦您添加<mat-toolbar>具有特定高度的父级，粘性栏将仅停留在工具栏大小的范围内。换句话说，如果您将工具栏的高度设置为 10vh，您将看到粘滞条停留在 10vh 空间内。原因是粘性仅适用于父容器的视口份额。解决方法：为什么我的位置：粘性不起作用？