Как заклеить нижнюю часть боковых панелей? ⇐ CSS

[Anonymous]

Код: Выделить всё

Левая боковая панель
Основной контент
 Правая боковая панель

При прокрутке боковой панели я хочу ее закрепить. Но когда я использую SidebarStick(), нижний колонтитул переполняется, потому что я использовал исправленное. Я пытаюсь использовать липкий. Однако сделать это не удалось

Код: Выделить всё

 if(scrollTop >= contentHeight - viewportHeight + sidebarTop) {
sidebar_content.style.transform = `translateY(-${contentHeight - viewportHeight + sidebarTop + margin_bottom}px)`;
sidebar_content.style.position = "fixed";
}

Как закрепить боковую панель, когда она заканчивается, чтобы она не перекрывала нижний колонтитул? Полный рабочий пример:

Код: Выделить всё

let left_sidebar = document.getElementsByClassName("main__left_sidebar")[0];
let right_sidebar = document.getElementsByClassName("main__right_sidebar")[0];

let left_sidebar_content = document.getElementsByClassName("main__wrap1")[0];
let right_sidebar_content = document.getElementsByClassName("main__wrap3")[0];

window.onscroll = () => {
sidebarStick(left_sidebar, left_sidebar_content, 25);
sidebarStick(right_sidebar, right_sidebar_content);

}

function sidebarStick(sidebar, sidebar_content, margin_bottom = 0) {
let scrollTop = window.scrollY; // current scroll position
let viewportHeight = window.innerHeight; //viewport height
let contentHeight = sidebar_content.getBoundingClientRect().height; // current content height
let sidebarTop = sidebar.getBoundingClientRect().top + window.scrollY;  //distance from top to sidebar

if (scrollTop >= contentHeight - viewportHeight + sidebarTop) {
sidebar_content.style.transform = `translateY(-${contentHeight - viewportHeight + sidebarTop + margin_bottom}px)`;
sidebar_content.style.position = "fixed";
} else {
sidebar_content.style.transform = "";
sidebar_content.style.position = "";
}
}

Код: Выделить всё

.main-container {
margin: 0 auto;
position: relative;
padding: 0 30px;
width: 100%;
max-width: 1460px;
}

.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}

.main__left_sidebar,
.main__right_sidebar,
.main__wrap3,
.main__wrap1 {
max-width: 290px;
width: 100%;
}

.main-content {
width: calc(100% - 628px);
}

.sidebar-right {
max-width: 290px;
width: 100%;
}

.box {
color: white;
width: 50px;
background: red;
height: 50px;
margin: 10px 0;
}

footer {
background: whitesmoke;
text-align: center;
}

Код: Выделить всё

Левая боковая панель
1
2
3
4
5
6
7


Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Основной контент

Правая боковая панель
1
2
3
4
5
6
7
8
9
10





Footer Footer Footer Footer Footer
Footer Footer Footer Footer
Footer Footer Footer Footer
Footer Footer Footer Footer

Подробнее здесь: https://stackoverflow.com/questions/783 ... f-sidebars