CSS: липкий верх и низ в одном контейнере ⇐ CSS

[Anonymous]

Я пытаюсь разместить липкие элементы сверху и снизу, но сверху и снизу все работает так, как ожидалось. Я вычисляю, следует ли прикреплять элемент div сверху или снизу, в зависимости от его местоположения.

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

const updateVisibleItems = () => {
const container = document.querySelector('.container')
const items = container.querySelectorAll('div');

const margin = 0;

const containerTop = container.scrollTop + margin;
const containerBottom = containerTop + container.clientHeight - margin;

const containerMid = (containerTop + (containerBottom - containerTop) / 2);

let firstVisibleIndex = -1;
let lastVisibleIndex = -1;

for (let i = 0; i < items.length; i++) {
const itemTop = items[i].offsetTop;
const itemBottom = itemTop + items[i].clientHeight;

if (itemBottom > containerTop && itemTop < containerBottom) {
if (firstVisibleIndex === -1) {
firstVisibleIndex = i;
}
lastVisibleIndex = i;
}
const itemMid = (itemTop + (itemBottom - itemTop) / 2);

if (itemMid < containerMid) {
items[i].style.top = '0';
items[i].style.bottom = 'auto';
} else {
items[i].style.top = 'auto';
items[i].style.bottom = '0';
}
items[i].style.zIndex = i+20;
}

const itemsBeforeFirstVisible = [];
const itemsAfterLastVisible = [];

for (let i = 0; i < firstVisibleIndex; i++) {
itemsBeforeFirstVisible.push(i);
}

for (let i = lastVisibleIndex + 1; i < items.length; i++) {
itemsAfterLastVisible.push(i);
}

console.log(itemsBeforeFirstVisible,'view',itemsAfterLastVisible);
}

(()=>{
document.querySelector('.container').addEventListener('scroll', updateVisibleItems, {passive: true})
})()

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

body{
background-color: #4c4d4e;
}

.container {
height: 200px;
display: flex;
flex-direction: column;
gap: 10px;
overflow: auto;
}

.container > div{
background-color: #8e8e8f;
border: 1px solid #4f46e5;
padding: 10px;
position: sticky;
z-index: 10;
}

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

foobar 1
foobar 2
foobar 3
foobar 4
foobar 5
foobar 6
foobar 7
foobar 8
foobar 9
foobar 10
foobar 11
foobar 12
foobar 13
foobar 14

Скрипка: https://jsfiddle.net/coldfox/gjovthqf/32 /
Похоже, что JS работает в аспекте, поскольку журналы точно показывают, что он находится за пределами области просмотра.

Подробнее здесь: https://stackoverflow.com/questions/785 ... -container