在可滚动表中设置div的限制

Question

好的，让我们看看能否以一种可以理解的方式描述我的问题。 我正在建立一个日程安排，左边是用户列，右边是时间线。 时间表保存计划事件。每个活动都有一个标题。时间轴可在两个方向上滚动。 当我水平滚动时，事件会滑到用户列下面，他们应该这样做。

但是，我想让事件标题浮动并且仍然显示，直到整个事件完全滑落。换句话说，我希望用户始终能够查看事件标题，无论事件有多长（只要事件可见）。

由于X和Y滚动功能，我无法在特定位置修复标题div？ 我只是希望它在事件div内滑动，剩余边距与用户列一样长。不知道怎么回事。也许不是一个好的解决方案 我会附上一些代码，但我不知道如何解决这个问题。

我对这个问题进行了“说明”，希望这会带来一些清晰度。 前两行描述了它现在的样子，最后两行描述了我想要实现的目标。

在此项目中使用： jQuery的， JQuery DataTables， AngularJS

Answer 1

我认为这就是你需要的http://jsfiddle.net/fDyE2/3/

HTML

<div class="user">
    <p>User</p>
</div>
<div class="timeline">
    <div class="event">
        <p class="title">Event 1</p>
    </div>
</div>

CSS

div {
    display:block;
    position:relative;
}
.user, .timeline {
    border:#000 dashed 1px;
    float:left;
}
.user {
    padding:17px 25px;
    margin-right:10px;
}
.timeline {
    padding:5px;
    width:400px;
    overflow:auto;
    height:76px;
}
.event {
    padding:5px;
    background:orange;
    width:800px;
    height:51px;
}

Jquery的

    $(ducument).ready(function(){
    var title = $(".title"),
    target = $(".event").offset().left;
setInterval(function () {
    if ($(".timeline").scrollLeft() > target) {
        title.css({
            "position": "fixed",
                "top": (title.closest(".event").offset().top + 5) +"px",
                "left": title.closest(".event").offset().right + "px"
        });
    } else {
        title.css({
            "position": "static",
                "top": "auto",
                "left": "auto"
        });
    }
}, 100);
    });