jquery - 调整浏览器大小时防止内容 div 与固定位置侧边栏重叠

Question

所以我有一个简单的问题示例，托管在http://linenwoods.com/random/this.html

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

我用来尝试解决问题的 jQuery 位：

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

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

任何帮助将不胜感激，

提前致谢

score 1 · Accepted Answer

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

虽然这会使布局略有变化，但它应该消除“跳跃”效果。

score 0 · Accepted Answer

试试这个：

查看小提琴并尝试使用水平滚动条

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

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