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，必须使用documentnot来完成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 回答