我正在尝试在网页上创建一种待办事项列表，它本质上是一个包含任务的大列表，但按日期划分。
为了实现这一目标，我正在考虑创建两个专栏。在左侧，我想显示包含日期的框，在右栏中，我想显示包含任务的列表。
我希望左栏中的日期框与列表一起滚动，并将其链接到具有该日期的第一个项目。
一旦到达页面（或 div）顶部，我希望它保留在顶部，就像粘性标题一样，直到下一个日期框向上滚动以替换它。
但是如何将这些日期框与另一列中的
<li>如有任何建议，我们将不胜感激。
有一个jsfiddle可以更多地展示我想要得到的东西：https://jsfiddle.net/jsfnx0yL/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Date and Task List</title>
<style>
body {
display: flex;
height: 100vh;
margin: 0;
overflow: hidden;
}
.container {
display: flex;
width: 100%;
}
.dates-column {
width: 20%;
position: relative;
overflow-y: hidden;
}
.tasks-column {
width: 80%;
overflow-y: scroll;
padding-left: 20px;
}
.date-box {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: lightgray;
padding: 10px;
text-align: center;
border-bottom: 1px solid #ccc;
}
.task-list {
list-style: none;
padding: 0;
}
.task-item {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.task-date {
padding: 10px;
font-weight: bold;
}
.sticky {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<!-- Left: Dates Column -->
<div class="dates-column">
<div class="date-box" id="sticky-date">Date 1</div>
</div>
<!-- Right: Tasks Column -->
<div class="tasks-column" id="task-list">
<ul class="task-list">
<li class="task-date" data-date="Date 1">Date 1</li>
<li class="task-item">Task 1</li>
<li class="task-item">Task 2</li>
<li class="task-item">Task 3</li>
<li class="task-date" data-date="Date 2">Date 2</li>
<li class="task-item">Task 4</li>
<li class="task-item">Task 5</li>
<li class="task-item">Task 6</li>
<li class="task-date" data-date="Date 3">Date 3</li>
<li class="task-item">Task 7</li>
<li class="task-item">Task 8</li>
</ul>
</div>
</div>
<script>
const taskList = document.getElementById('task-list');
const stickyDateBox = document.getElementById('sticky-date');
const dateItems = document.querySelectorAll('.task-date');
// Update sticky date box when scrolling
taskList.addEventListener('scroll', () => {
let stickyDate = '';
dateItems.forEach(dateItem => {
const rect = dateItem.getBoundingClientRect();
if (rect.top <= 0) {
stickyDate = dateItem.dataset.date;
}
});
if (stickyDate) {
stickyDateBox.textContent = stickyDate;
}
});
</script>
</body>
</html>