Прокрутка списка с прикрепленным заголовком ⇐ Jquery

[Anonymous]

Я пытаюсь создать на веб-странице своего рода список дел, который по сути представляет собой один большой список с задачами, но разделенный по датам.
Чтобы добиться этого, я думал о создании двух столбцов. Слева я хочу показать поля с датой, а в правом столбце я хочу показать список задач.
Я хочу дату в левом столбце, чтобы прокручивать список и привязывать его к первому элементу с этой датой.
Как только он достигнет верхней части страницы (или элемента div), я бы хотелось бы, чтобы он оставался сверху, как липкий заголовок, до тех пор, пока не прокрутится следующее поле даты, чтобы заменить его.
Но как я могу связать эти поля даты с [*] в другом столбце?
Будем признательны за любые советы.
Есть jsfiddle, чтобы показать немного больше того, что я пытаюсь получить : https://jsfiddle.net/jsfnx0yL/1/

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

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

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

.container {
display: flex;
width: 80%;
height: 80vh;
border: 0px solid #ccc;
}

#leftColumn,
#rightColumn {
flex: 1;
padding: 20px;
border: 0px solid #ddd;
height: 100vh;
}

#leftColumn {
background-color: #fafafa;
}

#rightColumn {
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

ul {
list-style-type: none;
}

li {
height: 80px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
background-color: #e0e0e0;
border-radius: 5px;
font-size: 18px;
}

.date {
font-size: 14px;
color: #666;
}

.date-box {
position: absolute;
width: 100px;
height: 80px;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
border-radius: 5px;
color: #333;
}

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

1/01/2025


[list]

List Item #11/01/2025
[*]List Item #21/01/2025
[*]List Item #31/01/2025
[*]List Item #41/01/2025
[*]List Item #51/01/2025


[*]List Item #62/01/2025
[*]List Item #72/01/2025
[*]List Item #82/01/2025
[*]List Item #92/01/2025
[*]List Item #102/01/2025


[*]List Item #113/01/2025
[*]List Item #123/01/2025
[*]List Item #133/01/2025
[*]List Item #143/01/2025
[*]List Item #153/01/2025
[/list]

Подробнее здесь: https://stackoverflow.com/questions/790 ... cky-header