位置をシミュレート：jqueryで修正します

StackOverflow https://stackoverflow.com/questions/3192848

  •  02-10-2019
  •  | 
  •  

質問

使用できないようにページの幅よりも大きいヘッダーがあります 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を取り付けるための奇跡の解決策が存在しないように思われます。水平方向にスクロールできます。誰かが以前にこの問題に遭遇した場合、私は賞金を始めて、良い解決策を見つけました。

すでにこれに答えようとした人々に感謝します。

役に立ちましたか？

解決

静的な位置付けられた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

他のヒント

ダミーのvisibililtyを作成できます。位置：固定要素の幅と同じ幅の隠された要素。これがサンプルです：

<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>

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

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

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

例：幅：150％;または幅; 2000px;

要件に応じて

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top