12

ページの幅よりも大きいヘッダーがあるため、position:fixed水平方向にスクロールできる必要があるため、ヘッダーをページの上部に設定することはできません。これに対する CSS ソリューションはないと思います。

の効果を再現するためにコードのサンプルを作成しましたposition:fixedが、望ましくないジャンプがあります。私のコードは次のとおりです：

$(window).scroll(function() {
            var y = $(window).scrollTop();
            $("#headertable").css('top', y+175);
});

のように、本当に取り付ける方法はありposition:fixedますか？(不思議なことに、この「ジャンプ」効果がないため、現時点では FF よりも IE の方が適切に表示されます)

ここで例を見つけてください: http://jsbin.com/eyuya/7。最初のテーブルは でposition:fixed、もう 1 つは私のコードを使用しています。解決策がある場合、それは私が回避しようとしているジャンプ効果です。

編集：

まだ満足のいく解決策を見つけていません。サイトはIEで使用することを意図しており、divをビューポートに添付する奇跡の解決策が存在するようには見えないため、最終的にこれを使用すると思います。横スクロール可能。誰かが以前にこの問題に遭遇し、良い解決策を見つけた場合に備えて、私は報奨金を開始しています。

問題に見えるほど単純ではなく、すでにこれに答えようとした人々に感謝します;）

4

4 に答える 4

8

静的に配置された DIV で要素をラップしてスクロールバーを取得し、ウィンドウのスクロールをリッスンして、scrollLeft値に従って固定ヘッダーを配置できます。

var elem = $('#headertable');
var win  = $(window);
var wrap = $('<div>').css({
    width: elem.width(),
    height: elem.height()
});
elem.wrap(wrap);
win.scroll(function() {
    elem.css('left', win.scrollLeft()*-1);
});

IE/FF/Chrome で動作するようです:

http://jsbin.com/efuya3

于 2010-07-19T11:07:29.370 に答える
3

position：fixed要素と同じ幅のダミーのvisibililty：hidden要素を作成できます。サンプルは次のとおりです。

<html>
<head>
  <script src="http://www.google.com/jsapi"></script>
  <script>
    google.load("jquery", "1.4.2");
    google.setOnLoadCallback(function() {
      $(document).ready(function(){
        var dummy = $('<div>dummy</div>').width( $('#header').width() + 'px').css('visibility','hidden');
        $('body').append(dummy);
      });
    });
    </script>
</head>
<body>
<div id="header" style="width:2000px;background:red;position:fixed;top:0;height:20px;">
    This is aheder with fixed position
</div>

<div style="height:1200px;background:green;">

</div>
</body>
</html>
于 2010-07-07T08:30:20.773 に答える
1

http://fixedheadertable.com/demo/multipletablesdemo.html

代わりにこれを試してください:)

于 2010-07-08T04:08:48.123 に答える
0

ラッパー div を作成してから、div で幅を指定できます

例: 幅: 150%; または幅; 2000px;

あなたの要件に応じて

なぜスクロールする必要があるのですか？

于 2010-07-07T08:00:53.123 に答える