Как сделать липкую матовую панель инструментов?
Я пытался внедрить панель инструментов mat, которая расположена после начальной панели навигации, и я не могу понять, что это правильно. Я попытался добавить класс "фиксированная позиция". Это будет работать, если начальная позиция была в верхней части страницы, но это не так. Как только пользователь прокручивает панель инструментов, она должна "прилипать" к верхней части страницы. Есть идеи, как это сделать? Я пробовал комбинации
.stickyBar { position: stikcy; }
и позиция фиксированная, но не повезло.
Есть идеи? Спасибо
3 ответа
Были родительские элементы с переполнением свойства css: hidden, которое мешает position: sticky. Вот пост, используемый для решения моего вопроса.
Похоже, когда вы устанавливаете
color="primary"
к панели инструментов, это делает ее липкой, но без цвета она не липкая (как странно, кстати, и не задокументировано, по крайней мере, для Angular Material 12).
Я мог бы сделать матовую панель инструментов липкой даже без атрибута цвета, добавив следующие стили:
position: sticky;
top: 0;
Внесите изменения ниже:
mat-toolbar{
display: initial;
}
.stickyBar {
position: sticky;
top: 0;
}
Как только вы добавите
<mat-toolbar>
родительского элемента с определенной высотой, липкая панель будет зависать только на размер панели инструментов. Другими словами, если вы установите высоту панели инструментов на 10vh, вы увидите, что липкая полоса застряла в пространстве 10vh. Причина в том, что липкость применяется только к доле родительского контейнера области просмотра. Временное решение: Почему моя позиция: липкая не работает?