В этом видео я расскажу, как можно создать прилипающий футер (sticky footer), который будет независим от контента на странице.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Создаем футер используя Zero-блок и помечаем этот блок классом uc-sticky-footer
1 шаг
<!--Прилипающий подвал (Sticky footer)
https://mt-webdesign.ru/sticky-footer-->
<style>
.uc-sticky-footer {
clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);
}
.uc-sticky-footer .t396__artboard {
position: fixed;
bottom: 0;
width: 100%;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var footerElement = document.querySelector('.uc-sticky-footer');
var footerSticky = document.querySelector('.uc-sticky-footer .t396__artboard');
if (footerElement && footerSticky) {
var artboardStickyHeight = footerSticky.offsetHeight;
footerElement.style.height = artboardStickyHeight + 'px';
}
});
</script>Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
