先看看效果图

思考：

1.头部用表格和div包装，表格的具体内容用表格包装

2.头部外侧的div与位置：相对定位

3.得到整个桌子的高度

4.获取从表单的dom(或包装在表单中的dom)到页面顶部的偏移距离

5.滚动零点的距离表格的高度与页面顶部的距离如果滚动超过这个值，让头部的顶部值返回0或保持不变

当然，还有很多地方需要优化。我只是展示一个小想法。

为什么用红色的表头因为显眼？哇，哈哈

javascript，javascript

/* * *最重要的一点是头部和身体是两个表，然后定位并使用relative然后roll来计算* */函数FixedHead (){ if(！(FixedHead的此实例)){返回新的fixed head()}；这个。$dom=$('。dataTables _ scrollHead’)；//标题domthis的外层。offsettop=这个。多姆。偏移量()。顶部；//从顶部开始的头部外部dom的高度。父母=这个。$ DOM。父母('。datatables _ scroll’)；//表头外层dom最外层的框(用表格包裹的框)this .发件箱高度=this . parents . height()；//标头外部dom中最外面的框(用表格包装的框)的高度。maxheight=这个。偏移选项。outboxheight//滚动零点最多可以滚动到哪里？this . roll()；} FixedHead . prototype={ constructor : FixedHead，scroll: function(){ var那=this$(窗口)。scroll(function(){ var scrollTop=$(this))。scroll top()；if((scroltopthat . offset top)(scroltopthat . max height)){ that。$ dom.css ('top '，(scroltopthat . offset top50)' px ')//这个50是因为我的头部导航固定在顶部，高度是50，所以} else {var应该加If(topcss==' 0px ' | | topcss==' auto '){ } else { that。$ dom.css ('top '，' 0px')}}}摘要

以上是边肖介绍的JS实现。表格标题是固定的，并随着水平滚动而滚动。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！