带有响应式内容的固定可折叠左侧边栏答案

【问题标题】：Fixed-collapsible-left-sidebar with responsive content带有响应式内容的固定可折叠左侧边栏
【发布时间】：2017-09-27 14:34:03
【问题描述】：

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

侧边栏和内容的可能位置图示：

但是让我们一步一步来。

我想在左侧有一个可折叠的固定侧边栏，并且在侧边栏折叠时展开主要内容（在侧边栏的右侧）。

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

我知道侧边栏的宽度，所以使用 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');
    }
  });
});
```
我想在第一个侧边栏的右侧添加第二个固定且可折叠的侧边栏。

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

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

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：