Выскальзывающий footer

создаем эффект выскальзывающего футера

2020-03-05 dr.Brain

время чтения 1 мин.

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

Итак, приступим.

Основные моменты, необходимые для реализации задачи:

Минимальная высота основного контента должна составлять 100vh. Сейчас это привычный трюк, испольуезмый практически для всех сайтов.
Фон основного контента должен быть непрозрачным, чтобы скрыть находящийся под ним футер.
Как сказано в предыдущем пункте, футер находится за блоком с основным контентом, для эффективной реализации задачи понадобятся еще такие CSS-свойства, как posiiton: relative и z-index.
Для того, чтобы футер находился в нижней части области видимости экрана пригодится position: sticky

Упрощенно структура HTML-документа выглядит следующим образом:

<body>
    <main></main>
    <footer></footer>
</body>

А вот и магия CSS:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

main {
  /* контент должен занимать всю область видимости */
  min-height: 100vh;

  /* фон контента должен быть непрозрачным */
  background: white;

  /* контент должен находится перед футером */
  position: relative;
  z-index: 1;

  font: 16px/1.4 system-ui, sans-serif;
  padding: 2rem;
}
footer {
  /* прибиваем футер к низу области видимости */
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;

  background: #252a47;
  display: grid;
  place-items: center;
  padding: 50px;
}

А вот и рабочий пример на codepen:

Спасибо за внимание.

По материалам статьи Chris Coyier “The Slideout Footer”.