使用 angular-ui-bootstrap 和固定的侧边栏 [英] Using angular-ui-bootstrap and a fixed sidebar

问题描述

我见过几个使用 bootstrap ScrollSpy/Affix 的例子，但是我很难将它应用到 angular-ui-bootstrap.我想在我的 UI 上有一个左侧边栏，它是固定的(即使页面的其余部分正在滚动，它的位置也会保持不变).

我有两个 plnkr.一个显示了一个非固定的(但主要是功能性的)侧边栏，另一个显示了一个几乎正常工作的固定侧边栏 - 但内容将宽度推得比它应该的更远.在第二个示例中，如果我能弄清楚如何将宽度限制为父宽度，它将按照我想要的方式工作:

静态边栏:

有谁知道我怎样才能让它工作?谢谢

解决方案

Adam，请尝试为您的固定元素添加宽度，例如

.sidebar >div { 位置:固定；z-索引:10000；顶部:50 像素；左:0；宽度:200px;}

更新:
这是使用原生 Bootstrap 类和一些媒体查询来管理侧边栏宽度的改进:
https://codepen.io/panchroma/pen/zzBZzV

I've seen several examples of using bootstrap ScrollSpy / Affix, but I'm having a hard time applying that to angular-ui-bootstrap. I would like to have a left-sidebar on my UI, that is fixed (it's position remains even when the rest of the page is scrolling).

I have two plnkr's. One shows a non-fixed (but mostly functional) sidebar, the other shows an ALMOST working fixed sidebar - but the content pushes the width out further than it should. In the second example, if I could figure out how to constrain the width to the parent width, it would work how I want:

Static sidebar: http://plnkr.co/edit/A1kyi1?p=preview

position:fixed (but width is pushed out too far) sidebar: http://plnkr.co/edit/R11BFt?p=preview

Here is the important code:

  <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;}

Screenshot:

Does anyone know how I can get this working? Thanks

解决方案

Adam, try adding a width to your the element that's fixed, eg

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

Update:
Here's a refinement which uses native Bootstrap classes and a few media queries to manage the sidebar width:
https://codepen.io/panchroma/pen/zzBZzV

这篇关于使用 angular-ui-bootstrap 和固定的侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！