Table header fixed research (one table)

Recently, I encountered the need to fix the table header in the project. Although there are many methods on the Internet, most of them are to write two tables, and our existing project does not want to add code or html structure to the jsp page. Finally, in the After trying many methods, I solved this problem by using the transform of css3. Now I will post the ideas, process and code to solve this problem. Welcome everyone to correct it.

$(function(){  
  var scrollTop;
  var frameWidow = window.parent.document.getElementById('mainFrame');//Get the iframe element where the table is located
  $(frameWidow).load(function(){ //Monitor whether the iframe is loaded End
var frameWidow1 = frameWidow.contentWindow;
$(frameWidow1).scroll(function() { //Monitor the scrolling of iframe scrollTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop; // The height of iframe scrolling is incompatible with        jquery.//Set transform for th         $('thead tr th').css({ //Because setting transform for thead is invalid for IE, set transform for th                    '-webkit-transform' : 'translate(0, '+scrollTop+'px)',             '-moz-transform': 'translate(0, '+scrollTop+'px)',





            '-ms-transform': 'translate(0, '+scrollTop+'px)',
            'transform': 'translate(0, '+scrollTop+'px)'
        });
})
  })
})