Почему меню не скролится до конца страницы?

Question

[Кристина]

Подскажите пожалуйста, почему меню, которому задано position:sticky, не скроллится до конца страницы?

Должно быть как здесь https://codepen.io/KrisIris/pen/YQVzXN
Спасибо!

Answer 1

[Василий]

121: - номер строки style.css
.menu.scrolled {
height: 100px;
position: fixed;
}
104:
.menu {
background: #f4f4f4;
background-color: rgb(244, 244, 244);
height: 50px;
display: flex;
align-items: center;
justify-content: center;
top: 0;
}
/*position:sticky - удаляем*/

Comments

[Кристина]

спасибо!

Answer 2

[Максим Тимофеев]

position:sticky не работает в половине браузеров: caniuse.com/#search=sticky

Answer 3

[Андрей]

У меня в сафари оба примера идентичны и не глючат, и не прекращают работу на полпути. Они тупо не работают вовсе :)
Хотя нет, на твоем сайте глючит меню, если скроллить страницу вверх то меню трансформируется, как будто я скроллю вниз.

Comments

[Кристина]

Андрей, а подскажите пожалуйста, где можно проверить отображение сайта в сафари? есть какой-то сервис?

Answer 4

[Игорь Перегудов]

Вот тут ответ

Разница в том, что position: sticky ведет себя как position: relative относительно в пределах своего родителя, пока данное смещение порогового значения в окне просмотра.