javascript - 容器溢出时 float 表头？

Question

我正在使用 position:fixed 在用户滚动到顶部时在我的表格中 float 一些标题，ala 这个方法:http://css-tricks.com/persistent-headers/

在常规页面上一切都很好，但是每当我在另一个 div 中有一个表或具有固定高度和 overflow:auto 的东西时，它就会爆炸。

我需要做什么才能不仅考虑页面范围的滚动，还要考虑容器的滚动？并考虑滚动到所述容器的“顶部”？

感谢你们给我指出的任何方向。

这是我现有的代码:

var mainheader = table.rows[0];
var tableHeight = table.getHeight();
var tableScroll = table.viewportOffset();
var headerHeight = mainheader.getHeight();

// TODO: If we're scrolling a subcontainer, we need to get the offset for that too! Somehow?

// If tableHeight < 1, it means our table his hidden right now, so skip it
if (tableHeight < 1)
    continue;

// If we've scroll down past the very tip top of the table, but haven't yet scroll past the end of it, show our floating headers
if (tableScroll.top < 0 && tableHeight + tableScroll.top - headerHeight > 0)
{
    table.floatingheader.style.display = '';

    // Handle horizontal scrolling too!
    table.floatingheader.style.left = (tableScroll.left + 1) + 'px'; // 1px offset for border
}
else
    table.floatingheader.style.display = 'none';

注意:我可以访问 prototype.js，但没有 jQuery 或任何其他第 3 方库。 :/

Answer 1

我知道你没有使用 jQuery，但你可能想看看 github 上的这个人的代码，看看他是如何实现它的，然后根据你的目的修改它:http://webpop.github.com/jquery.pin/