混合固定位置HTML布局的技术

Question

让我们说设计师希望：

• 固定导航元素划分左右内容区域（左侧区域没有滚动条）
• 不可折叠的权利内容区域（例如，无法防止小视口的水平滚动条）

这会带来一个两难境地，即在存在水平滚动条的情况下，内容将在固定位置导航栏下滚动。虽然这种设计并不常见，但我想到的唯一解决方案是JavaScript滚动事件监听器。

我的第一个两个问题是：

1）通过scrollX的值轻推固定位置元素，使它们“混合固定”（垂直固定，但可通过JavaScript水平移动）

2）使用position:fixed将左侧区域设置为overflow-y: hidden，并通过调整margin-top

模拟JavaScript中的滚动以模仿主滚动条

查看this jFiddle for a live example of the issue以及上述JavaScript解决方案。在小提琴中，单击链接“在固定位置导航栏下滚动”以查看问题并单击按钮以应用JavaScript解决方案。

欢迎任何替代方法（尤其是非JS技术）。