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

Horizontally and vertically scrollable content with fixed header

本文关键字：垂直 滚动 水平 标题      更新时间：2023-09-26

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

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

这里有一个小提琴来演示我的问题：jsFiddle

演示：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;}

粘性表格标题

演示：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();
    }
});
相关文章：