Using angular-ui-bootstrap and a fixed sidebar

问题

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

回答1:

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

回答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>

来源：https://stackoverflow.com/questions/44487529/using-angular-ui-bootstrap-and-a-fixed-sidebar

标签

angularjs

angular-ui-bootstrap

angular-ui