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

粘性的表是一个简单的jQuery插件使表头粘上滚动,你永远不会松散表标题。
(function($){
	$.fn.stickytable = function(options){
		
		var settings = $.extend({},$.fn.stickytable.defaults, options);
		
		return this.each(function(index){
			var table = $(this);
			var fixedheader = $('<div class="header-fixed"></div>');
			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('<thead class="theader"></thead>');
					$('.theader',table).prependTo(table);
				} 
				
				else $('tr',table).eq(0).wrap('<thead></thead>');
			}

			var $header = $("thead", table).clone();
			var newTable = $('<table class="'+table.attr('class')+'"></table>');
			$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();
});