Set limit for div in scrollable table

Question

Ok lets me know if I can describe my problem in an understandable way. Im is building a schedule with a user column on the left and a timeline on the right. The timeline contains schedule events. Each event has a title. The timeline scrolls in both directions. When I scroll horizontally, events move under the user column that they should do.

But I would like the title of the event to be pop-up and still display until the whole event jumps completely. In other words, I want the user to always be able to select the title of the event no matter how long the event is (while the event is visible).

Can't I fix the div title at a specific position due to the scroll function of X and Y? I just want it to slide inside the div of the event with the remaining brand as long as the user column. I don’t know, though. Maybe this is not a good solution? I would attach some code, but I have no idea how to approach this problem.

I made an illustration of the problem, I hope this brings some clarity. The first two lines describe what it looks like now, the last two lines describe what I want to achieve.

Uses in this project: jQuery, jQuery DataTables, AngularJS

Answer 1

I think this is what you need 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);
    });