html - 使日历组件可在 x 和 y 轴上滚动

Question

我正在用我自己的 HTML/CSS 创建一个日历组件。
它的标题水平方向(x 轴)可以有多个类别，垂直方向(y 轴)最多可以有 24 个时隙。

垂直滚动时类别标题必须始终可见，水平滚动时时隙必须始终可见。

如何通过 css 实现这一点？

查看我想要的屏幕截图(图像中跨 header 的更多轨道导致内容溢出)。

也许可以将其作为我的简单 html 结构:

<div class="calendar">
    <div class="calendarColumnHeaders"></div>
    <div class="calendarGrid">
        <div class="timeSlotsColumn"></div>
        <div class="tracksContainer"></div>
    </div>
</div>

谢谢

Answer 1

给<div class="tracksContainer"></div>一个名为 stick 的额外类(class)

添加此CSS:

.stick {
    position:fixed;
    top:0px;
}

不幸的是，您确实需要一些Jquery

jQuery – 计算贴纸 div 的位置，并在页面滚动那么远时固定其位置。

$(document).ready(function() {
    var s = $(".tracksContainer");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});