Achieve the effect of freezing the top bar of the table, and freezing the top bar of the table

Achieve the effect of freezing the top bar of the table, and freezing the top bar of the table

The company encountered a small demand last night to achieve the effect of freezing the top bar like a table. The specific description is the effect of the dynamic diagram below.

This effect is not very difficult, but it is really troublesome to implement it. The difficulty here is not much to say, that is, the effect gets a little more at once, finally, I found the answer on a frequently visited website.

Original problem address: https://segmentfault.com/q/1010000000130774

Here we will introduce the usage of this small plug-in. First, download the code from github, the famous "Same-Sex" website. Decompress the package as follows:

It is mainly used in my red box. You can also view people's source code. Here, you only need to reference js, and then add the following two classes in the table and thead labels:

Then add the following JavaScript code:

In the red box. Then the results are displayed.

However, some people may have no effect. Don't panic. Press F12 to check the error message. size does not define this method. In this case, you can replace this js file:

Then we can achieve the effect! Some people may feel bored. You are full of pictures. I don't want to copy them directly, but I think there is a gap between reading a lot of things and writing them myself, I hope you can write it for a moment, but I thought that I did not want to open my eyes last night. How can I try to write it again, so I can use my image to make a copy:

Class = "table-fixed-header" in table"
Class = 'header' in thead'

Js: $ ('. table-fixed-header'). fixedHeader ();

Well, it's over now. The first time I wrote a blog, the writing was not good. If you have any questions, please talk to me and make common progress.