使用 CSS Sticky 属性滚动时标题不会粘住

Question

我有一个简单的日历视图，可以静态地编码为下面的 React 组件。有一个父容器，它包含两个容器

timeslot

和

days

。我希望它们彼此相邻，所以我使用了 flex 属性。现在我希望容器具有固定大小，并希望溢出项目滚动。当我滚动时，我希望标题保持不变。当我滚动垂直长度的 40% 后，

timeHeader

和

dayHeader

停止粘住。我被困在这个问题上有一段时间了。请帮忙！

import React from "react";
import "./Test.css";

function Test() {
    return (
        <div className="parent">
            <div className="timeslot">
                <div className="timeHeader">Time</div>
                <div>
                    <ul>
                        <li>7:00 a.m</li>
                        <li>8:00 a.m</li>
                        <li>9:00 a.m</li>
                        <li>10:00 a.m</li>
                        <li>11:00 a.m</li>
                        <li>12:00 p.m</li>
                        <li>1:00 p.m</li>
                        <li>2:00 p.m</li>
                        <li>3:00 p.m</li>
                        <li>4:00 p.m</li>
                        <li>5:00 p.m</li>
                        <li>6:00 p.m</li>
                        <li>7:00 p.m</li>
                        <li>8:00 p.m</li>
                        <li>9:00 p.m</li>
                        <li>10:00 p.m</li>
                    </ul>
                </div>
            </div>
            <div className="days">
                <div className="dayHeader">Days</div>
                <div className="dayslots">
                    <div>
                        <ul>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                        </ul>
                    </div>
                    <div>
                        <ul>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                            <li>2</li>
                        </ul>
                    </div>
                    <div>
                        <ul>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                            <li>3</li>
                        </ul>
                    </div>
                    <div>
                        <ul>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                            <li>4</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Test;

及其CSS

.parent {
    display: flex;
    width: 400px;
    height: 100px;
    overflow: scroll;
}

.timeHeader {
    position: sticky;
    top: 0;
    background-color: white;
}

.timeslot {
    position: sticky;
    left: 0;
    z-index: 2;
    background: white;
}

.days {
    flex: 5;
}

li {
    min-width: 100px;
}

.dayslots {
    display: flex;
}

.dayHeader {
    background-color: white;
    position: sticky;
    top: 0;
}

li标签里面的数据，你可以忽略它，它可以是任何东西。我想要修复的就是始终坚持时间标题。当我垂直滚动时，日期标题会粘贴，而时间，即上午 7:00...当我水平滚动时，会粘贴。

Answer 1

您的问题与 .timeslots css 属性有关。

.parent {
    display: flex;
    width: 400px;
    height: 200px; /* Adjusted for more height */
    overflow: auto; /* Changed to auto */
}

.timeHeader, .dayHeader {
    position: sticky;
    top: 0;
    background-color: white;
}

.days {
    flex: 5;
    }

li {
    min-width: 100px;
}

.dayslots {
    display: flex;
}