jquery - 两个固定的 div - 左右

Question

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

演示在这里

我不知道如何纠正它。有什么解决办法吗？

Answer 1

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

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

Answer 2

当页面滚动时，您通过应用类和position:fixed为您的#asideand元素设置 a 。#bsidefixedfixed2

由于position:fixed当应用于#asideand时#bside，将它们从文档流中取出，因此元素#main按预期向左浮动。

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

请参阅此工作小提琴示例。

CSS

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

jQuery

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