Навигация по боковой панели закреплена, в конце прокрутки немного перемещается вверх, почему? ⇐ Javascript

[Anonymous]

Я создал div боковой панели и div основного контента. Основной контент содержит большой объем текста, что делает страницу прокручиваемой. Я хочу, чтобы боковая панель оставалась липкой при прокрутке страницы. Я добился этого, используя положение: липкий и верхнее значение, но при прокрутке боковая панель застревает посередине, а в конце прокрутки она перемещается вверх. Почему это происходит?

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--light-color: #EDF4F2;
--dark-color: #31473A;
--medium-color: #D3CAE2;
}

body {
min-height: 100vh;
min-width: 100vw;
background-color: var(--light-color);
display: grid;
grid-template-columns: 20% 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'top-nav-area top-nav-area'
'side-area main-area'
'side-area main-area'
'side-area footer-area';

}

.top-navigation {
top: 0;
position: sticky;
grid-area: top-nav-area;
background-color: var(--medium-color);
padding: 2em;
}

.side-navigation {
min-height: calc(100vh - 82px);
top: 82px;
position: sticky;
align-self: start;
grid-area: side-area;
background-color: var(--dark-color);
overflow-y: auto;

}

.main-content {
grid-area: main-area;
}

.footer {
grid-area: footer-area;
background-color: var(--light-color);
}

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

Navigation
side-navigation

large  text

footer

вывод, который я получаю




Подробнее здесь: https://stackoverflow.com/questions/793 ... scroll-why