如何制作粘性角材料墊工具欄？

Question

我一直在嘗試實現一個位於初始導航欄之后的墊子工具欄，但我似乎無法正確使用。 我試過添加“位置固定”類。

如果初始位置位於頁面頂部，這將起作用，但事實並非如此。 一旦用戶滾動通過工具欄，它應該“粘”到頁面的頂部。

任何想法如何實現這一點？ 我試過組合

.stickyBar { position: sticky; }

和位置固定但沒有運氣。

有任何想法嗎？ 謝謝

Answer 1

有父元素的 css 屬性溢出：隱藏干擾位置：粘性。 這是用於解決我的問題的帖子。

Answer 2

進行以下更改：

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

一旦您添加具有特定高度的<mat-toolbar>父項，粘性欄將僅停留在工具欄的大小上。 換句話說，如果您將工具欄的高度設置為 10vh，您將看到粘性欄在 10vh 的空間內保持卡住。 原因是粘性僅應用於父容器的視口份額。 解決方法： 為什么我的 position:sticky 不起作用？