Question

我有一个带有一些嵌套视图的角应用程序可能会导致问题，但我无法将其固定下来。每当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>

Bootstrap附加的侧边栏与Angular app

1 个答案: