I'm trying to figure out why my affix
-ed panel isn't staying put when I change my Angular view.
I've added the affix property directly to the panel on the first page (details), and left it in the data-spy only in the second page (flights).
In a full blown web version, if I refresh the flights page, suddenly the affix kicks in, and stays put when I scroll, but doesn't if I just navigate to the page using Angular.
It looks like the affix isn't being added to the class by Bootstrap when I navigate between views.
HTML:
<div class="panel panel-primary mySidebar" id="sidebar"
data-spy="affix" data-offset-top="0" data-offset-bottom="200">
CSS:
.mySidebar.affix {
position: fixed;
top: 250px;
}
.mySidebar.affix-bottom {
position: absolute;
top: auto;
bottom: 450px;
}
Here's a Plunker..
http://plnkr.co/edit/S0Bc50?p=preview
I found a similair question here:
Twitter Bootstrap: Affix not triggering in single page application
But I couldn't figure out how to apply that to my problem here...
Any help would be great!
Angular UI Utils (not Angular UI Bootstrap, as mentioned in the comments) has a Scrollfix directive that can be used in place of Affix. I had the same problem as you with Affix not working after changing views. I tried adding Angular UI Scrollfix to my app and so far it looks like it will meet my needs.
Here is a helpful Stack Overflow post I found with more explanation and examples: Angular ui-utils scrollfix.