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

Question

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

如果初始位置位于页面顶部，这将起作用，但事实并非如此。 一旦用户滚动通过工具栏，它应该“粘”到页面的顶部。

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

.stickyBar { position: sticky; }

和位置固定但没有运气。

有任何想法吗？ 谢谢

Answer 1

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

Answer 2

进行以下更改：

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

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