Если вы используете его в своем проекте, то сразу признаете его г-кодом.
Перенес секцию hero в общий контейнер, но position: sticky все равно не работает
.container
.hero
.hero__text
.nav
section
.container
.hero
.hero__text
.nav
section
position: sticky
, нужно добавить свойство top, например с нулевым значением, то есть:.nav {
position: sticky:
top: 0;
}
position: relative
. z-index: -1
, а для родительского блока установить background: transparent
. Да, есть какие-то общепринятые практики, но рубить с плеча "следует отказаться от стилизации элементов по ID селектору" - порождает дальнейшее непонимание того как работает каскад, специфичность и т.п.
В общем я не вижу ни одного аргумента за visibility, кроме экономии строчки кода, когда надо отключить срабатывание событий на скрытом элементе))
visibility: hidden
можно ещё заменить такой строчкой pointer-events: none
, но основная суть от этого не меняется. Простое скрытие элемента через opacity, требует дополнительных свойств(или свойства), чтобы почти полноценно скрыть элемент. Это ещё почему?
Практически нет никакой нужды использовать одновременно два этих свойства. opacity:0 и visibility:hidden почти эквивалентны.
Представьте, у вас есть 10 изображений, медленный интернет, вы открываете страницу, текст подгрузился, а изображения еще не подгрузились, вы читаете написанное, изображение подгружается, оно занимает ранее не рассчитанный размер на странице и своим появлением сдвигает текст.