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

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.