固定可折叠左侧边栏，具有响应内容

Question

我的目标是在左侧有两个固定和可折叠的侧边栏，并且右边的主要内容在侧边栏折叠/展开时“跟随”侧边栏。

侧边栏和内容的可能位置说明：

但是让我们一步一步地进行。

1. 我希望左侧有一个可折叠的固定侧边栏，以及侧边栏折叠时要展开的主要内容（侧边栏右侧）。

   这里的东西是侧边栏有一个固定的位置，因此右边的内容必须向右推（左边距）以避免重叠。

   我知道侧边栏的宽度，所以使用CSS / JavaScript不是问题，我在这里有一个工作示例：https://jsfiddle.net/Pawamoy/yamm7eLh/2/

   基本上，当您单击侧边栏（底部）时，侧栏上会切换active类，并在内容上切换expand类。这些类将改变侧边栏的宽度和内容的左边距。

   $(document).ready(function() {
     $('#sidebar').on('click', function(e) {
       if ($(e.target).is("#sidebar")) {
         $('#sidebar').toggleClass('active');
         $('#content').toggleClass('expand');
       }
     });
   });
   

2. 我想在第一个右侧添加第二个固定且可折叠的侧边栏。

   但是，由于我需要计算哪个侧边栏是活动的，所以使用切换的CSS类是不够的，以便能够设置内容的左边距。两个侧边栏折叠时左边距为160px，只有一个折边时为320px，没有折叠时为500px。不仅如此，第二侧边栏本身需要根据第一个侧边栏宽度来回推动。

我想象的解决方案：内容可以“跟随”左侧的元素（第二个侧边栏），而不会更改其左边距值。有没有办法做到这一点，知道两个侧边栏都是固定的（当用户滚动主要内容时，它们保持在屏幕上的相同位置）？换句话说，如何将第二个侧边栏相对于第一个侧边栏定位，以及相对于第二个侧边栏的内容，同时让两个侧边栏“固定”？

Answer 1

我用盒子思考解决了这个问题。我没有尝试在三个侧面到侧面元素之间完成复杂的大小调整，而是使用了另一层div。请参阅下图中的想法：左边是我想要做的。在右边是我如何解决它。我甚至设法添加了一个固定的导航栏。我只是把我已经拥有的东西拿到了第二次使用它。

此处的关键是 NOT 为固定元素指定left CSS定位值。这是更新的小提琴：https://jsfiddle.net/Pawamoy/yamm7eLh/3/