javascript - Bootstrap 词缀将元素移动到容器的左侧

Question

我想要固定两个侧导航栏，但是当我向下滚动时，左侧导航栏列会移动到其父 div 的左侧。

我知道问题是 Affix 将位置更改为固定，因此任何 float 都无关紧要。

我的问题应该在这里很清楚

http://www.bootply.com/deaSbNAJ0b - 不介意右侧栏

我相信答案就在 javascript 中。我的第一个想法是更改 Affix 函数以使用父元素的位置来计算触发后附加元素的位置，但我不知道从哪里开始，JavaScript 对我来说仍然是新的。

Answer 1

基本上这个问题有 already been answered here 。正如文档中所解释的..

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

因此，在这种情况下，您必须为附加元素设置特定的宽度。当它变为 position:fixed 时，它将从正常文档流中删除，并且不会保持其正常的基于百分比的“不固定”宽度。

您需要调整宽度，以使其最适合其他页面内容，请记住 position:fixed 无法响应 Bootstrap 列。这里它仅应用于宽度大于 991px 的情况，以便列可以在较小的屏幕上正常堆叠。

@media (min-width: 992px) {
  .affix-top {
    position: static;
    margin-top:10px;
    width:240px;
  }

  .affix {
    position: fixed;
    top: 10px;
    width:240px;
  }
}

http://www.bootply.com/FlGXADz2L3