在可滾動表中設置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);
    });