Relow
@Relow
Ничего не умею

Почему не работает sticky?

У сайдбара в флексбоксе указал position: sticky . У этого же сайдбара align-self: flex-start

5d85fc48c579a340891539.jpeg

https://codepen.io/therelow/pen/NWKexmP
  • Вопрос задан
  • 7563 просмотра
Решения вопроса 1
Не знаю почему, но методом исключения заметил, что это свойство не работает из-за наличия следующего правила
html, body {
    overflow-x: hidden;
}

P.S. Если задать его не обоим тегам сразу (HTML и body), а только одному (например, только body), то блок с position:sticky работает корректно
5d8600e7e43c1399885343.png

Результат, если это правило закомментировать (всё работает)
https://codepen.io/hisbvdis/pen/BaBvKaa
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
werty1001
@werty1001
undefined
Нужно сделать чтобы сайдбар был во всю высоту (убрать align-self: flex-start) и добавить внутрь еще один див (например .filters) и перенести стили:

.filters {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	padding: 0 21px 25px;
	box-shadow: 0 0 30px #f1f1f1;
	background-color: #ffffff;
}

<div class="sidebar">
	<div class="filters">...</div>
</div>
Ответ написан
@romanown
так же если у родителя флекс display: flex или (и) у одного из родителей overflow: hidden. у меня было сразу оба параметра.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы