Задать вопрос
@donaire

Как сделать прилипающую панель?

Как сделать панель как на сайте https://www.city24.ee/? Оранжевая панель, при прокрутке идёт вверх на место панели с рекламой, при достижении верха прилипает. Как сделать такую же прилипающую панель, только снизу?
  • Вопрос задан
  • 116 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
@donaire Автор вопроса
Надо разделить страницу на 3 блока div, второму присвоить значения
position: sticky;
position: -webkit-sticky; для Safari
top: 0;
примерно как показано здесь: https://www.w3schools.com/css/css_positioning.asp
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@alexalexes
Как минимум, контейнер, который должен прилипать, должен иметь следующие свойства:
.footer-container
{
  position: sticky;
  bottom: 0;
}

И этот контейнер должен изначально находится в нижней части страницы.
Ответ написан
Комментировать
irishmann
@irishmann
Научись пользоваться дебаггером
Открываешь сайт, открываешь инструменты разработчика и изучаешь.
У блока header прописаны вот такие стили:
.header {
    background: #fd9800;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 3.5rem;
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    top: 0;
    z-index: 85;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    -o-transition: transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
}

Скрин с devtools

66ab0e1ab7b0e583265886.png
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы