javascript - 停止绝对定位的 div 以在相对父级内移动

Question

我在容器中有两个 div。一个是 absolutely 定位的，在最上面。第二个 div 是容器的底部。它们都位于具有 position: relative 的容器内。如果用户在底部 div 上水平而非垂直滚动，则绝对定位的 div 也会滚动。问题在于，由于它是绝对定位的，所以当滚动底部时，整个 div 都会移动。

有没有办法避免这种情况？无论如何，我只想让 div 留在原地。

这是一个 JSFiddle 示例。我不能只更改容器的 position: relative 属性，因为在我的情况下，它会弄乱页面中的所有其他内容。

https://jsfiddle.net/2m16rtjp/6/

要查看一组所需的结果(我说的是水平滚动时的查看方式)，将 position: absolute 替换为 position: fixed for .titleSection-right.我需要绝对定位 div 才能让插件正常工作。

Answer 1

我提供了带有简单标记的新 fiddle ，因为你的不够清楚，希望这有帮助，思路很简单，在rightSide滚动条上，我们可以改变titleSection-right的left。

HTML:

<div class="container">
    <div class="box1">
        <div></div>
    </div>
    <div></div>
</div>

CSS:

.container {
    position: relative; 
    width 500px; 
    overflow-x: auto;
    height: 200px;
}
.box1 {
    position: absolute; 
    width: 400px; 
    height: 50px; 
    background-color:red;
    overflow: auto;
}
.box1 > div{
    width: 2000px; 
    height: 200px;
}
.box1 + div{
    width: 2000px;
    height: 200px;
}

JS:

$('.container').on('scroll', function(){
  $('.box1').css('left', $(this).scrollLeft());
});

jsfiddle link