Question

上有一个简单的问题示例

问题是边栏正在使用position: fixed;，因此取决于视口的大小。当我缩小浏览器并使用水平滚动条时，主内容div与侧边栏重叠。我在缩小浏览器时使用水平滚动条时尝试使用jQuery来调整侧边栏的位置。

我用jQuery尝试解决问题：

$(document).scroll(function(e) {
  $('#right').css({
    'left': 0 - $(document).scrollLeft()
  });
});

jQuery几乎可以正常工作，但是因为固定定位左/右/上/下值取决于视口宽度/高度我不能给这个小函数一些自动值来计算视口宽度..这是容易的事情修复还是需要大量的代码？我是jQuery的新手，因此很难深入了解文档并找到我需要的内容。我所寻找的只是朝着正确方向迈出的一步。

非常感谢任何帮助，

提前致谢

Answer 1

如果您只是不想“跳转”，可以尝试在CSS中为left:0指定#right。

这会使布局稍微改变，但它应该删除“跳跃”效果。

Answer 2

试试这个：

请参阅fiddle并使用水平滚动条

进行尝试

$(document).scroll(function (e) {
   $('#right').animate({
    'left': 0 - $(document).scrollLeft()
   }, 100);
});

最初需要：

#right {
   width: 150px;
   position: fixed;
   left:50px;        /* <-----initially required*/
}