0

この固定要素はページの右側にあります。CSSコードは次のとおりです。

#rightSide {
  height: 100%;
  min-height: 613px;
  width: 450px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
  background-color: #fafafa;
  position: fixed;
  right: 0px;
  display: block;
  float: right;
  padding: 0;
  z-index: 200;
}

HTML：

<body>
  <div id="rightSide"></div>
</body>

このページでやりたいことは、ウィンドウのサイズ変更がある場合、要素は垂直方向にのみ固定され、ページとともに水平方向にスクロールするということです。これが私が使用するJavascriptです（サイズ変更とスクロールはjQueryイベントです）：

$(window).resize(function() {
  var bod = $('body').innerWidth();
  var wid = $(this).innerWidth();
  var wind = bod - wid;
  $('#rightSide').css("right", '-'+ wind +'px');
  $(this).scroll(function () {
    var scrleft = $('body').scrollLeft();
    var scrl = scrleft - wind;
    $('#rightSide').css("right", scrl +'px');
  });
});

奇妙なことに、このコードはChromeでは問題なく機能しますが、Firefoxでは機能しません。なぜこれが起こっているのか分かりますか？

ありがとう！

編集これが役立つ場合は、本文のCSSです。

body {
  width : 100%;
  min-width: 1070px;
  height : 100%;
  margin : 0px auto 0px auto;
  padding : 0px 0px 0px 0px;
  display: block;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 613px;
}
4

2 に答える 2

0

さて、私は問題の原因を見つけました。FirefoxとIEでは、scrollLeftを正しく使用するには、次のようなものでdocumentはなくbody、次のように実行する必要があるようです。

var scrleft = $(document).scrollLeft();

お役に立てれば。

于 2012-11-30T11:47:42.923 に答える
0

このようなスクリプトは必要ありません。position: fixed; right:0;CSSで十分です。float: right;また、スタイルを取り出します。これは不要であり、絶対/固定ポジショニングでは意味がありません。どちらも必要ありませんdisplay:block-divはデフォルトでブロックされています。

于 2012-11-29T19:00:39.257 に答える