Bootstrap 附加的侧边栏被 Angular 应用程序中的主要内容重叠

Question

我有一个 Angular 应用程序，其中包含一些可能导致问题的嵌套视图，但我无法确定它。每当position: fixed 被添加到侧边栏时，主要内容就会移动并覆盖它。你可以在this page 看到发生了什么，这是我的一些代码，如果需要更多，请告诉我。

*更新 我尝试结合 app.products 和 app.products.juice 状态，但我仍然遇到问题，所以我认为这是我的 CSS 而不是嵌套状态

控制器

.controller('ProductsCtrl', function() {
    $('#affix').affix({
      offset: {
        top: function () {
              var $el = $('#productsBg');
              return (this.top = $el.position().top + $el.outerHeight(true));
            },
        bottom: 50
      }
    })
  })

SCSS

.ui-view-container {
  position: relative;
}
.panelNav {
  margin: 5% 0 0 5%;
  &.affix {
    top: 0;
  }
}

状态应用

<header>
...
</header>

<div class="ui-view-container">
  <main ui-view="mainContent"></main>
</div>

<footer id="footer">

</footer>

说明 app.products

<div class="container-fluid">
  <div id=affix class="col-md-2 panelNav">
    <div class="panel panel-primary">

      <div class="panel-heading">Products Menu</div>

      <div class="list-group">
        <a class="list-group-item" ui-sref="app.products.juice">Juice</a>
        <a class="list-group-item" ui-sref="app.products.mods">Mods</a>
        <a class="list-group-item" ui-sref="app.products.batteries">Batteries</a>
        <a class="list-group-item" ui-sref="app.products.tanks">Tanks</a>
      </div>

    </div>
  </div>

  <section class="col-md-9">
    <ui-view name="productsContent"></ui-view>
  </section>
</div>

声明 app.products.juice

<div>
  <p> 10 paragraphs of filler text</p>
</div>

Answer 1

2017 年 6 月更新：正如 @AdamPlocher 所指出的，我在下面的原始建议并未明确回答问题，这里有一个更好的说明：

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

====
原答案

看看这对你有没有帮助：http://codepen.io/panchroma/pen/EKGXGj

当你将position: fixed; 应用到侧边栏时，它会使其失去流动性，主要内容向左移动，进入侧边栏所占据的空间。

我认为应该为您工作的一个选项是保持侧边栏不变，而是创建一个新的子 div 并将 position:fixed; 应用于此子 div。 （见下文）

执行此操作时，侧边栏保持流畅，不会折叠，主要内容也不会向左移动。

希望这会有所帮助！

=== CSS ===

.panelNav{
  position:absolute;
}

=== 原始 HTML ===

<div class="container-fluid original">
   <div class="col-md-2 sidebar panelNav">sidebar</div>
   <div class="col-md-9 main-content">main content</div>
</div>

=== 更新的 HTML ===

<div class="container-fluid">
   <div class="col-md-2 sidebar">
      <div class="panelNav">sidebar</div>
   </div>
  <div class="col-md-9 main-content">main content</div>
</div>