Bootstrap affixed sidebar being overlapped by main content in Angular app - css

Question

I have an angular app with some nested views that might be causing the problem but I just can't pin it down. Whenever position: fixed is added to the sidebar the main content moves over and overlaps it. You can see whats happening at this page and here is some of my code, let me know if more is needed.
*Update
I tried combining the app.products and app.products.juice states and I still have the issue so I'm thinking it's my CSS and not the nested states
Controller
.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;
}
}
State app
<header>
...
</header>
<div class="ui-view-container">
<main ui-view="mainContent"></main>
</div>
<footer id="footer">
</footer>
State 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>
State app.products.juice
<div>
<p> 10 paragraphs of filler text</p>
</div>

Answer 1

Update Jun 2017: As noted by #AdamPlocher my original suggestion below didn't clearly answer the question, here's a better illustration:
https://codepen.io/panchroma/pen/ZyOOdM
====
Original answer
See if this helps you :http://codepen.io/panchroma/pen/EKGXGj
When you apply position: fixed; to the sidebar, it takes it out of flow, and the main content moves to the left, into the space which had been occupied by the sidebar.
One option which I think should work for you is to leave the sidebar unchanged, and instead create a new child div and apply position:fixed; to this child div. (see below)
When you do this, the sidebar stays in-flow, doesn't collapse and the main content doesn't move left.
Hope this helps!
=== CSS ===
.panelNav{
position:absolute;
}
=== Original 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>
=== Updated 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>