javascript - 将限制设置为可滚动表中的 div

Question

好的，让我们看看我能否以一种易于理解的方式描述我的问题。 我正在构建一个时间表，左侧是用户列，右侧是时间线。 时间线包含计划事件。每个事件都有一个标题。时间轴可以双向滚动。 当我水平滚动时，事件会滑到用户列下方，这是他们应该做的。

但是，我想让事件标题 float 并仍然显示，直到整个事件完全滑入下方。换句话说，我希望用户始终能够看到事件标题，而不管事件持续多长时间(只要事件可见)。

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

我做了一个问题的“说明”，希望能使问题更加清晰。 前两行描述了现在的样子，后两行描述了我想要实现的目标。

在这个元素中使用: 查询, JQuery 数据表， 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;
}

查询

    $(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);
    });