Question

我有两行数据（绿色）和一个标题（红色），它应始终可见：

查看我已有的例子：

这是我目前的HTML：

<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>

和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;
}

现在红色标题与内容一起滚动，但它应该粘贴到现在的位置，但是垂直滚动内容（MS Excel样式）。

如何实现（最好只使用CSS）。

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

Answer 1

我不认为通过纯css实现目标是不可能的，因为粘性的项通常使用position:fixed，遗憾的是它们相对于视口进行了修复。

使用javascript（在本例中为jquery库）和绝对定位，你应该能够实现你的目标：

新款式：

.row {
    height:50px;
    overflow:scroll;
    clear:both;
    width:1000px;
    position:relative; //for the absolute positioning of sticky
    background-color:yellow;
    padding-left:150px; //this is the size of your sticky column so it doesn't cover content when fully left
    box-sizing:border-box;//this is so the padding doesn't add extra width to your 1000px
}

.sticky {
    background-color:red;
    position:absolute; left:0; top:0;
}

<强>的javascript：

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

http://jsfiddle.net/j9C8R/36/

Answer 2

好的，我已经废弃了你的东西并制作了一个全新的东西，我只是没有将东西包裹在一个相对容器的位置，但你可以设法做到至少

垂直滚动很容易，但如果你想要水平滚动和移动标题，（CSS不会这样做）

Demo

CSS

.head {
    background-color: #f00;
    width: 300px;
    position: absolute;
    left: 100px;
}

.head table {
    width: 100%;
}

.body {
    position: relative;
    left: 100px;
    top: 20px;
    width: 300px;
    height: 50px;
    overflow-y: auto;
}

.body table {
    width: 100%;
}

.body td {
    width: 100px;
}

.head table td {
    width: 100px;
}

.left {
    position: absolute;
    background-color: #0f0;
    width: 90px;
    top: 40px;
}

水平滚动，粘滞div保持在左边框

2 个答案: