javascript – 水平滚动,粘滞div保持在左边框

我有两行数据(绿色)和一个标题(红色),它应始终可见：

看看我已有的例子：

这是我目前的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).

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

解决方法

我不认为有可能通过纯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());
});

@L_403_1@

原文链接：https://www.f2er.com/js/149904.html

javascript – 水平滚动,粘滞div保持在左边框

解决方法

猜你在找的JavaScript相关文章