Question

我在页面右侧有这个固定元素。这是它的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;
}

Answer 1

你不需要这样的东西的脚本。 position: fixed; right:0; CSS应该足够了。另外，取出float: right;风格;这是不必要的，绝对/固定定位没有意义。您也不需要display:block - 默认情况下div是块。

Answer 2

好吧，我发现了问题的根源，看来在Firefox和IE下，要正确使用scrollLeft，必须使用document而不是body完成，例如：

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

希望这有帮助。

脚本在Chrome上工作但在Firefox上没有

2 个答案: