页面滚动头部悬浮，一般都会首相想到监听滚动条离顶部高度然后给需要悬浮的部分position设置成fixed，在一般布局里面是可以的，不过在table布局里面，如果要fixed悬浮thead里面的th会发现宽度样式都乱了。只能想其他办法了，可以先写一个div里面放正常需要的table，然后滚动页面后再显示出一个可以随屏幕滚动的新的thead，如图所示，圈起来的代表需要悬浮的thead：

滚动悬浮的效果如图：

话不多说直接上代码。

css代码如下：

<style type="text/css">#scroll_head {position: absolute;display: none;}
</style>

html代码如下：

<table class="order ncu-table-style"><thead><tr><th class="w10"></th><th class="w100"></th><th class="w100">商品信息</th><th class="w60">单价</th><th class="w60">数量</th><th class="w100">订单总价</th><th class="w110">状态</th><th class="w10"></th></tr></thead><tbody></tbody>
</table>
<div id="scroll_head"><table width="100%"><thead> <tr><th class="w10"></th><th class="w100"></th><th class="w100">商品信息</th><th class="w60">单价</th><th class="w60">数量</th><th class="w100">订单总价</th><th class="w110">状态</th><th class="w10"></th></tr></thead></table>
</div>

js代码如下：

$(window).scroll(function () {if ($('.order tbody tr').length > 0) {var thead = $('.order tbody').prev();var thOffset = thead.offset();var scTop = $(window).scrollTop();  //滚动条相对top的位置if (scTop > thOffset.top) {   //滚动条滚到thead及以下的位置，用临时的thead代替显示$('#scroll_head').css('display', 'block');$('#scroll_head').offset({ top: scTop, left: thOffset.left });}else {  //滚动条滚到thead上的位置，用table的原始thead显示$('#scroll_head').css('display', 'none');}}
});

以上代码就可以完成页面滚动到table的thead下面后，thead悬浮在页面，不过会发现悬浮的thead每一列的宽度和原来的对应不上，需要在原来table内容生成后加上另外一段js，我的table内容是异步得到的，所以放在ajax的success里面调用，宽度设置js如下：

//该函数在上面一个table数据加载完成后调用
//把表头的宽度设置到会滚动的页头去
function copyThWidth(){var b = $('.order tbody').prev().find('tr:last').find('th');var c = $('#scroll_head').find('tr:last').find('th');for (var i = 0; i < b.length; i++) {var newWith = b.eq(i).width();c.eq(i).width(newWith);}
}

这样就大功告成了~