0

position:fixedユーザーが一番上をスクロールしたときに、テーブルにいくつかのヘッダーをフロートさせるために使用しています。このメソッドは、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 やその他のサードパーティ ライブラリはありません。:/

4

1 に答える 1

1

jQueryを使用していないことは承知していますが、githubでこの人のコードを見て、彼がそれをどのように実装しているかを確認してから、目的に合わせて変更してください: http://webpop.github.com/jquery.pin/

于 2013-03-29T20:53:55.987 に答える