两个固定的div - 右和左

Question

我想在我的网页上创建两个固定的div。首先应该在左边，第二个在右边。我创建了一些代码，但它并不完美。

演示here

我不知道如何纠正它。任何解决方案？

Answer 1

通过提供等于固定列宽度的margin到 #main ，它会使该区域不会向左捕捉。将position:fixed应用于列时，它会将这些元素从文档流中取出。

由于position:fixed动态地应用于列（通过使用JS），您也可以考虑动态地将margin应用于 #main ，如果是仅限时间目的。

Answer 2

当页面滚动时，您通过应用课程position:fixed和#aside将#bside设置为fixed和fixed2元素。< / p>

由于position:fixed适用于#aside和#bside，因此将其从文档流中移出，元素#main按预期向左浮动。

为避免更改当前代码，一个简单的解决方案是使用类为您的#main元素设置某些样式，并根据需要应用该类：

请参阅此working Fiddle示例。

<强> CSS

.fixMiddle {
    position: relative;
    left: 190px;         /* your #aside width+padding+border */
}

<强>的jQuery

if ($('#aside').hasClass('fixed')) {
  $('#main').addClass('fixMiddle');
} else {
  $('#main').removeClass('fixMiddle');
}