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

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。 请参见下图所示的想法：左侧是我正在尝试做的事情。 右边是我如何解决它。 我什至设法添加了一个固定的导航栏。 我只是拿走了已经拥有的东西，在细分市场中第二次使用它。

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