写了个插件，，用来固定表的头部和尾部。

/*! * smartFloat v1.0.1 * Copyright 2019- Richard * Licensed under MIT */ $.fn.extend({ smartFloat: function (_newpos = { top: 0 }, _stopElement = undefined) { function position(element) { var csstop = element.offset().top; var csspos = element.css("position"); var csswidth = element.width(); $(window).scroll(function () { var scroll = $(this).scrollTop(); //滚动条所在位置 if ((scroll > csstop //如果滚动到页面超出了当前元素element的相对页面顶部的高度 || $(this).height() < csstop) //如果元素超过窗口高度 ) { element.css({ position: "fixed", ‘z-index‘: 999, width: csswidth }).css(_newpos); //如果碰到了停止浮动的元素 if (_stopElement) { _stopElement = $(_stopElement) var secsstop = _stopElement.offset().top; try { if (secsstop >= scroll && secsstop < (scroll + $(window).height())) { //元素在可视区域 restoreCss(); } } catch (error) { console.log(error); } } //调整表头每个th的宽度，使其和td宽度一致 if (element.parent()[0].tagName.toLowerCase() == ‘table‘ && !element.data(‘widthIsSeted‘)) { var arrChildWidth = Array(); element.next().find(‘tr‘).eq(0).children().each(function (i) { arrChildWidth[i] = $(this).width(); //保存数据行每个td的宽度 }); element.find(‘th‘).each(function (i, th) { $(th).width(arrChildWidth[i]); //设置每个th的宽度和td一致 }); console.log(‘调整表头每个th的宽度‘); element.data(‘widthIsSeted‘, true); } } else { restoreCss(); } }); function restoreCss() { element.css(‘position‘, csspos); } }; return $(this).each(function () { position($(this)); }); } });

调用方式：

$(".card-close").smartFloat({ ‘top‘: ‘10px‘, ‘right‘: ‘50px‘, ‘z-index‘: 999 });
$("thead").smartFloat({ ‘top‘: 0, ‘z-index‘: 990 }); //浮动表头

$("#tablefooter").smartFloat({ bottom: 0 }, "footer"); //浮动功能区，footer可见时取消浮动

JQuery浮动对象插件