jQuery粘性表插件表格头部固定在顶部

下载地址

粘性的表是一个简单的jQuery插件使表头粘上滚动,你永远不会松散表标题。(function($){ $.fn.stickytable = function(options){ var settings = $.extend({},$.fn.stickytable.defaults, options); return this.each(function(index){ var table = $(this); var fixedheader = $("

"); var tableOffset = table.offset().top; var tableleft = table.offset().left; var tablewidth = table.width(); var tableheight = table.height(); if($("thead",table).length < 1) { if($("th",table).length > 0){ $("th",table).eq(0).parent().wrap(""); $(".theader",table).prependTo(table); } else $("tr",table).eq(0).wrap(""); } var $header = $("thead", table).clone(); var newTable = $("

"); $header.appendTo(newTable); newTable.css("margin","0"); fixedheader.css({ "position":"fixed", "top":"0px", "display":"none", "left":tableleft+"px", "width":tablewidth+2+"px", "z-index": "103" }); var $fixedHeader = fixedheader.append(newTable); table.find("th").each(function(index, valuee){ //console.log($(this).width()+"px"); $header.find("th").eq(index).css("width",$(this).width()+"px"); }); $(window).on("scroll", function() { var offset = $(this).scrollTop(); tableOffset = table.offset().top; tablewidth = table.width(); tableheight = table.height(); if (offset >= tableOffset && $fixedHeader.is(":hidden") && offset < tableOffset+tableheight) { fixedheader.appendTo("body"); $fixedHeader.fadeIn(100); table.addClass("stuck"); } else if (offset < tableOffset || offset > tableOffset+tableheight-30) { $fixedHeader.fadeOut(150); table.removeClass("stuck"); } }); }); } $.fn.stickytable.defaults = { }})(jQuery);$(document).ready(function(){ $(".stickytable").stickytable();});

dd: