javascript - 水平滚动，粘性 div 保持在左边框

Question

我有两行数据(绿色)和一个标题(红色)，它们应该始终可见:

查看我已有的示例:

http://jsfiddle.net/j9C8R/33/

现在红色标题随内容一起滚动，但它应该保持在现在的位置，但会随内容垂直滚动(MS Excel 样式)。

如何实现(最好只使用 CSS)。

更新:重要的是红色标题与相应的内容一起垂直滚动，但在水平滚动时保持在左边缘。

.main {
  background-color: blue;
  overflow: scroll;
  height: 200px;
  width: 400px;
}

.row {
  height: 50px;
  overflow: scroll;
  clear: both;
  width: 1000px;
  background-color: yellow;
}

.sticky,
.content {
  float: left;
  width: 150px;
  border: 1px solid black;
}

.sticky {
  background-color: red;
}

.content {
  background-color: green;
}

<div class="main">
  <div class="row">
    <div class="sticky">Sticky header A</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
    <div class="content">ContentA</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header B</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
    <div class="content">ContentB</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header C</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
    <div class="content">ContentC</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header D</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
    <div class="content">ContentD</div>
  </div>
  <div class="row">
    <div class="sticky">Sticky header E</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
    <div class="content">ContentE</div>
  </div>
</div>

Answer 1

更新

请注意以下内容现在有点过时，因为我们有 css position sticky

原帖

我认为不可能通过纯 css 实现您的目标，因为粘性元素通常使用 position:fixed 不幸的是，它相对于视口(viewport)固定了它们。

通过使用 javascript(在本例中为 jquery 库)和绝对定位，您应该能够实现您的目标:

$('.main').scroll(function() {
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});

.main {
    background-color:blue;
    overflow:scroll;
    height:200px;
    width:400px;
}
.row {
    height:50px;
    overflow:scroll;
    clear:both;
    width:1000px;
    position:relative;
    background-color:yellow;
    padding-left:150px;
    box-sizing:border-box;
}
.sticky, .content {
    float:left;
    width:150px;
    border:1px solid black;
}
.sticky {
    background-color:red;
    position:absolute; left:0; top:0;
}
.content {
    background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
    <div class="row">
        <div class="sticky">I should stick to the left border</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
        <div class="content">Content</div>
    </div>
</div>