Question 407941 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Scrolling through list with sticky header

I’m trying to create a sort of a to-do list on a webpage which essentially is one big list with tasks, but divided by dates.

To achieve this, I was thinking of creating two columns. In the left, I would like to show boxes that hold the date in it and in the right column, I would like to show the list with the tasks.

I would like for the date box in the left column to scroll along with the list and for it to be linked to the first item with that date.

Once it reached the top of the page (or div) I would like it to remain on the top, much like a sticky header, until the next date box scrolls up to replace it.

But how can I link these dateboxes with the <li> in the other column?

Any advice would be appreciated.

There’s a jsfiddle to show a bit more what I’m trying to get: https://jsfiddle.net/jsfnx0yL/1/

Tags:

2

Answers


  1. 0 
    <!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>
    Login or Signup to reply.
  2. 0

    The easiest way, without using javascript, is to add hidden blocks that will be identical to the height of the row, which will allow you to place blocks with dates where tasks for this date begin.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

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

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

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

        #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: sticky;
            top: 10px;
            width: 100px;
            height: 80px;
            background-color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            border-radius: 5px;
            color: #333;
            margin-bottom: 10px;
        }

        .date-box--hidden {
            visibility: hidden;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="leftColumn">
        <div class="date-box">1/01/2025</div>
        <div class="date-box date-box--hidden"></div>
        <div class="date-box date-box--hidden"></div>
        <div class="date-box date-box--hidden"></div>
        <div class="date-box date-box--hidden"></div>

        <div class="date-box">2/01/2025</div>
        <div class="date-box date-box--hidden"></div>
        <div class="date-box date-box--hidden"></div>
        <div class="date-box date-box--hidden"></div>
        <div class="date-box date-box--hidden"></div>

        <div class="date-box">3/01/2025</div>
        <div class="date-box date-box--hidden"></div>
        <div class="date-box date-box--hidden"></div>
        <div class="date-box date-box--hidden"></div>
        <div class="date-box date-box--hidden"></div>
    </div>
    <div id="rightColumn">
        <ul>
            <!-- Items with date 1/01/2025 -->
            <li><span>List Item #1</span><span class="date">1/01/2025</span></li>
            <li><span>List Item #2</span><span class="date">1/01/2025</span></li>
            <li><span>List Item #3</span><span class="date">1/01/2025</span></li>
            <li><span>List Item #4</span><span class="date">1/01/2025</span></li>
            <li><span>List Item #5</span><span class="date">1/01/2025</span></li>

            <!-- Items with date 2/01/2025 -->
            <li><span>List Item #6</span><span class="date">2/01/2025</span></li>
            <li><span>List Item #7</span><span class="date">2/01/2025</span></li>
            <li><span>List Item #8</span><span class="date">2/01/2025</span></li>
            <li><span>List Item #9</span><span class="date">2/01/2025</span></li>
            <li><span>List Item #10</span><span class="date">2/01/2025</span></li>

            <!-- Items with date 3/01/2025 -->
            <li><span>List Item #11</span><span class="date">3/01/2025</span></li>
            <li><span>List Item #12</span><span class="date">3/01/2025</span></li>
            <li><span>List Item #13</span><span class="date">3/01/2025</span></li>
            <li><span>List Item #14</span><span class="date">3/01/2025</span></li>
            <li><span>List Item #15</span><span class="date">3/01/2025</span></li>
        </ul>
    </div>
</div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search