使用angular-ui-bootstrap和固定的侧边栏

Question

我见过几个使用/ ScrollSpy的例子，但我很难将其应用于angular-ui-bootstrap。我想在我的UI上有一个左边栏，那是固定的(它的位置仍然保留，即使页面的其余部分是滚动的)。

我有两个plnkr，一个显示了一个不固定的(但大部分是功能性的)侧边栏，另一个显示了一个几乎可以正常工作的侧边栏--但是它的内容超出了它应有的宽度。在第二个示例中，如果我能弄清楚如何将宽度约束到父宽度，它将按我想要的方式工作：

静态侧边栏：http://plnkr.co/edit/A1kyi1?p=preview

位置:固定(但宽度推得太远)侧边栏：http://plnkr.co/edit/R11BFt?p=preview

下面是重要的代码：

  <div class="container pull-left">
    <div class="row">
      <div class="col-sm-12 col-md-3 sidebar" style="background-color:blue;">
        <div style="background-color:orange;">
          Some side bar stuff
          <br />
          <br /> Some side bar stuff
          <br />
          <br /> Some side bar stuff
          <br />
          <br /> Some side bar stuff
          <br />
          <br /> Some side bar stuff
          <br />
          <br /> Something that pushes the width out.  Something that pushes the width out....    
        </div>
      </div>
      <div class="col-sm-12 col-md-9" style="background-color:#eeeeee;">
        <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
          jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy
          dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown
          fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the
          lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
        </p>

css：

.sidebar > div {  position: fixed; z-index:10000; top:50px;left:0;}

截图：

​

有人知道我怎么才能让它工作吗？谢谢

Answer 1

Adam，试着给你固定的元素增加一个宽度，例如

.sidebar > div {  position: fixed; z-index:10000; top:50px;left:0; width:200px;}  

更新

下面是一个改进，它使用原生Bootstrap类和一些媒体查询来管理侧边栏宽度：

https://codepen.io/panchroma/pen/zzBZzV

Answer 2

CSS：

.sidebar-fixed {
    position: fixed;
}

HTML

<div class="col-md-3 sidebar-fixed">Side bar content</div>
<div class="col-md-9">Main Content</div>