Question

我有一个带有固定标题的表：http://dev.driz.co.uk/table/

我想要做的是当用户滚动.uiGridContent时，它将按照这样的方式移动.uiGridHeader，如果我向右滚动50px，那么标题将向左移动50px，以便网格仍然匹配。

我如何使用jQuery做到这一点？

Answer 1

使用Scroll事件和scrollLeft getter / setter

$('.uiGridContent').scroll(function() {
    $('.uiGridHeader').scrollLeft($('.uiGridContent').scrollLeft());
});

example here

提示：

将标题左侧的填充更改为margin-left以消除滚动结束时的错误

div.uiGridHeader
{
    height: 28px;
    margin-right: 17px;
    border: #ccc 1px solid;
    border-width: 0 0 1px 0;
    background: -webkit-linear-gradient(#fff,#ddd);
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

example 2 here

Answer 2

这可以使用CSS解决。为你的div尝试position:fixed属性。

如果您使用的是jQuery，则可能需要使用.scroll property进行计算。

Answer 3

你能尝试一些管理固定标头的JQuery插件吗？请参阅示例http://www.datatables.net/release-datatables/extras/FixedHeader/html_table.html。

jQuery在滚动时协调移动div

3 个答案: