0

我正在用我自己的 HTML/CSS 创建一个日历组件。
它可以在其标题的水平方向（x 轴）上有多个类别，并且它的垂直方向（y 轴）将有多达 24 个时隙。

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

我怎样才能通过css实现这一点？

请参阅屏幕截图了解我想要的内容（跨标题的图像更多轨道导致内容溢出）。 在此处输入图像描述

也许把它作为我的单一 html 结构：

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

谢谢

4

2 回答 2

0

给<div class="tracksContainer"></div>一个额外的类叫做stick

添加这个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"); 
        }
    });
});
于 2013-09-27T17:41:32.147 回答
-1 
overflow-x: scroll; //horizontal
overflow-y: scroll; //vertical
于 2013-09-27T13:46:40.460 回答