具有固定标题的水平和垂直滚动内容 [英] Horizontally and vertically scrollable content with fixed header

问题描述

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

I have a content div with dynamic width (it adjusts itself to the windows width). In this div I have two tables which are broader than the viewport of my wrapper div. Therefore the wrapper should be horizontally scrollable. The div has also a fixed height which means that everything should be vertically scrollable too! Just the Header should stay on top but also scroll along horizontally with the content table.

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

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

Here's a fiddle to demonstrate my problem: jsFiddle

推荐答案

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

标题宽度更改： http：// jsfiddle.net/techsin/pDhmy/8/

执行此操作的代码

$（'。mega'）。on（'scroll'，function（）{$（'。header'）。css（'top'，$（this）.scrollTop（））;}） / code>

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

和....

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

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

这篇关于具有固定标题的水平和垂直滚动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！