javascript - 2 列固定 - 可滚动

Question

我有 2 列，我需要修复第一列，其中第二列有一个长列表并且需要可滚动。

<div class="row">
  <div class="col-md-9"></div>
  <div class="col-md-3"></div>
</div>

Col-md-9 列表很长，Col-md-3 需要修复。我已经尝试了一段时间来使它正常工作，但事情总是出问题。

当我尝试 position:fixed 时，col-md-3 自动向左浮动。 我试图给所有东西宽度，甚至从 Bootstrap 中删除了网格系统，但我无法让它工作。

我可以像这样硬编码:

<div class="col-md-9" style="float: left;width: 100%;margin-right: 243px">

和

<div class="col-md-3" style="float: right;width: 243px;position: fixed;margin-left: 728px">

但这会像 hell 一样破坏响应能力......

@Edu Lomeli 指出 Affix Js .作为 Bootstrap 文档:

The subnavigation on the right is a live demo of the affix plugin.

这正是我正在寻找的确切行为。问题是我没有完全理解它。

Answer 1

通过将 Col-md-3 向左移动来修复 Affix JS

<div class="container">
  <div class="row">
    <div class="col-sm-3" data-spy="affix" data-offset-top="0"></div>
    <div class="col-md-9"></div>
  </div>
</div>

看看-----> Bootply