Как сделать липкую матовую панель инструментов?

Question

Я пытался внедрить панель инструментов mat, которая расположена после начальной панели навигации, и я не могу понять, что это правильно. Я попытался добавить класс "фиксированная позиция". Это будет работать, если начальная позиция была в верхней части страницы, но это не так. Как только пользователь прокручивает панель инструментов, она должна "прилипать" к верхней части страницы. Есть идеи, как это сделать? Я пробовал комбинации

.stickyBar { position: stikcy; }

и позиция фиксированная, но не повезло.

Есть идеи? Спасибо

Answer 1

Были родительские элементы с переполнением свойства css: hidden, которое мешает position: sticky. Вот пост, используемый для решения моего вопроса.

Answer 2

Похоже, когда вы устанавливаете color="primary"к панели инструментов, это делает ее липкой, но без цвета она не липкая (как странно, кстати, и не задокументировано, по крайней мере, для Angular Material 12).

Я мог бы сделать матовую панель инструментов липкой даже без атрибута цвета, добавив следующие стили:

      position: sticky;
top: 0;

Answer 3

Внесите изменения ниже:

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

Как только вы добавите <mat-toolbar>родительского элемента с определенной высотой, липкая панель будет зависать только на размер панели инструментов. Другими словами, если вы установите высоту панели инструментов на 10vh, вы увидите, что липкая полоса застряла в пространстве 10vh. Причина в том, что липкость применяется только к доле родительского контейнера области просмотра. Временное решение: Почему моя позиция: липкая не работает?