Почему не работает свойство position: sticky?

Как сделать так, чтобы при прокрутке оставался только header__nav, а логотип скрывался? Почему свойство position: sticky не срабатывает?
  • 30 сентября 2023 г. 14:47
Ответы на вопрос 3
Свойство position: sticky не срабатывает, если не определены соответствующие значения для свойств top, right, bottom или left. 

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

```css
.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.header__nav {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 200;
}

.logo {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 150;
}
```

В данном случае, элементы с классами .header__nav и .logo имеют одно и то же значение top:0, но .header__nav имеет более высокий z-index, чем .logo, что позволяет ему оставаться прикрепленным к верхней границе окна браузера при прокрутке, в то время как .logo скрывается.
высота родительского контейнера должна быть больше размера элемента, чтобы появилась полоса прокрутки. Если высота родительского контейнера меньше размера элемента, элемент останется на своем месте и не будет прилипать. 
 элемент останется на своем месте и не будет прилипать, если высота родительского контейнера меньше размера элемента. Для того чтобы появилась полоса прокрутки, высота родительского контейнера должна быть больше размера элемента.
Похожие вопросы