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

Question

[Dmitry]

Как сделать панель как на сайте https://www.city24.ee/? Оранжевая панель, при прокрутке идёт вверх на место панели с рекламой, при достижении верха прилипает. Как сделать такую же прилипающую панель, только снизу?

Answer 1

[Dmitry]

Надо разделить страницу на 3 блока div, второму присвоить значения
position: sticky;
position: -webkit-sticky; для Safari
top: 0;
примерно как показано здесь: https://www.w3schools.com/css/css_positioning.asp

Answer 2

[alexalexes]

Как минимум, контейнер, который должен прилипать, должен иметь следующие свойства:

.footer-container
{
  position: sticky;
  bottom: 0;
}

И этот контейнер должен изначально находится в нижней части страницы.

Answer 3

[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