javascript - 具有固定标题的水平和垂直滚动内容

Question

我有一个动态宽度的内容 div（它会根据窗口宽度自行调整）。在这个 div 中，我有两个比我的包装 div 的视口更宽的表。因此包装器应该是水平滚动的。div 也有一个固定的高度，这意味着一切都应该是垂直滚动的！只是标题应该保持在顶部，但也应该与内容表一起水平滚动。

<div class="wrapper">
    <table width="2000" class="fixed"><tr></tr></table>
    <table width="2000"><tr></tr></table>
</div>

这是一个演示我的问题的小提琴：jsFiddle

Answer 1

演示：http: //jsfiddle.net/techsin/pDhmy/4/

标题宽度变化：http: //jsfiddle.net/techsin/pDhmy/8/

执行此操作的代码

$('.mega').on('scroll',function(){$('.header').css('top',$(this).scrollTop());});

和....

.header{position:absolute; background-color:rgb(202, 202, 202);}

.header+* {margin-top:30px;}

Answer 2

粘性表格标题

演示：http: //jsfiddle.net/gvee/kJ9xp/

HTML

<table>
    <thead>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </thead>
    <tr class="sticky-header">
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>

    ... etc ...

</table>

CSS

* {
    margin: 0;
    border: 0;
    padding:0;
}

table {
    border-collapse: collapse;
    margin: 10px;
}

th, td {
    width: 50px;
    height: 50px;
    background-color: #eee;
    text-align: center;
    border: 1px solid #ddd;
}

.sticky-header {
    display: none;
    position: fixed;
    top: 0px;
}
.sticky-header th {
    background-color: red;
}

jQuery

var thead = $('thead');
var th = $('.sticky-header');
var t = $('table');

$(document).scroll(function() {
    if ($(this).scrollTop() >= thead.offset().top && $(this).scrollTop() < t.offset().top + t.height() - th.height())
    {
        th.show();
    } else {
        th.hide();
    }
});