scroll-behavior применяется непосредственно к элементу html, так что он применяется к прокрутке всего окна.
position: sticky всегда меня ловит. Сначала я применил его к элементу навигации, но это не работает, потому что он привязан к своему родительскому элементу, а у родительского элемента нет внутренней прокрутки. Элемент html - это элемент, который прокручивается, поэтому липкость применяется ко всему элементу заголовка на странице (включая панель навигации).
Поскольку липкий элемент применяется ко всему блоку заголовка (который является высотой страницы), позиция top для липкого элемента должна быть высотой элемента заголовка (100%) за вычетом высоты навигации (в моем случае 100px). Итак, я собираюсь использовать отличное значение CSS calc (которое очень хорошо поддерживается): top: calc(-100% + 100px).
Окончательный код показан ниже. Я применил его только тогда, когда навигация заполнена, в моем случае шириной > 768px, и мне пришлось настроить компонент заголовка, чтобы использовать гибкое поле, чтобы он оставался равным высоте окна (обратите внимание, что это только в конкретно для моего случая, скорее всего, вам это не понадобится).
@media all and (min-width: 768px) {
html {
scroll-behavior: smooth;
}
#masthead {
position: sticky;
top: calc(-100% + 100px);
/* make sure stick above images */
z-index: 1;
/* tweaks to the ffconf design
to keep the height right */
display: flex;
flex-direction: column;
}
.logo-wrapper {
flex-basis: 85vh;
}
}Полная рабочая демонстрация здесь - в настоящее время только Firefox поддерживает как position: sticky , так и scroll-behavior, поэтому его лучше всего просматривать там. Но вы также можете увидеть, что он хорошо работает (без улучшений) в Chrome и других браузерах.
Изначально опубликовано в B: log Реми Шарпа
