我有一个具有动态宽度的内容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();
}
});