JS implements fixed table headers and the headers scroll horizontally. jstable

JS implements fixed table headers and the headers scroll horizontally. jstable

First read one

Ideas:

1. the header is wrapped with a table and a div, and the specific content of the table is wrapped with a table

2. Use positon: relative to locate the div outside the header

3. Obtain the height of the entire table.

4. Obtain the offsetTop distance from the table dom (or dom wrapped in the table) to the top of the page.

5. The distance between the scroll zero point and the table height + the distance between the table and the top of the page. If the scroll value exceeds this value, the top value of the header is set to 0 or the original value is not fixed.

Of course, there are many other things that can be optimized. I just want to demonstrate a small idea.

The problem is caused by a red header.

JS Code

/*** The most important thing is that the head and body are two tables, then positioning with relative and then calculating by rolling **/function FixedHead () {if (! (This instanceof FixedHead) {return new FixedHead ()}; this. $ dom = $ ('. dataTables_scrollHead '); // The outer dom of the header this. offsetTop = this. $ dom. offset (). top; // The height of the header's outer dom from the top. this. parents = this. $ dom. parents ('. dataTables_scroll '); // The outermost box of the dom in the header (the box wrapped in the table) this. outBoxHeight = this. parents. height (); // the height of this. maxHeight = this. offsetTop + this. outBoxHeight; // The maximum number of zero-point scrolling points. scroll ();} FixedHead. prototype = {constructor: FixedHead, scroll: function () {var that = this; $ (window ). scroll (function () {var scrollTop = $ (this ). scrollTop (); if (scrollTop> that. offsetTop) & (scrollTop <that. maxHeight) {that.w.dom.css ('top', (scrollTop-that. offsetTop + 50) + 'px ') // This 50 is added because the height of my head navigation is fixed to 50 on the top.} else {var topCss = that.w.dom.css ('top '); if (topCss = '0px '| topCss = 'auto') {} else {that.w.dom.css ('top', '0px ')}}})}}

Summary

The above section describes how to implement fixed table headers in JavaScript and scroll the table headers horizontally. I hope this will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!