javascript – 在可滚动表中将div设置为div

2019年8月4日 142次阅读

好的,看看我能否以一种可以理解的方式描述我的问题.

我正在建立一个日程安排,左边是用户列,右边是时间线.

时间表保存计划事件.每个活动都有一个标题.时间轴可在两个方向上滚动.

当我水平滚动时,事件会滑到用户列下面,他们应该这样做.

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

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

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

在这个项目中使用：
jQuery的,
JQuery DataTables,
AngularJS

最佳答案 我想这就是你需要的
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);
    });
点赞