title: Bootstrap affix not working with data attributes in aurelia
body: <p>This seems to be a very common problem as there are about 10 posts about Bootstrap affix not working. Unfortunately, none of those solutions seem to work. The documentation states to use data attributes to simply apply the "data-spy" attribute to any element and then add the .affix .affix-top and .affix-bottom to the css. Doing this, nothing actually happens. The web page acts as the affix isn't even there. I know the CSS file is there as I just added .bg-pink to one of the divs and it turned pink. If I put "affix" in my class in one of the divs it will lock that element, but it completely destroys any of the container formatting. Is aurelia doing anything funny with the js in the background possibly? I can get it to work on its own, but not within the aurelia app.</p>
  
  <p>Docs I am following: <a href="http://getbootstrap.com/javascript/#affix" rel="nofollow">http://getbootstrap.com/javascript/#affix</a></p>
  
  <p>The following is the way I would expect it to work, but apparently HTML doesn't like it.</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
              &lt;!-- selection menu bar --&gt;
              &lt;div class="well well-lg"  data-spy="affix" data-offset-top="60" data-offset-bottom="200"&gt;
                 &lt;!-- My content that should be locked --&gt;
                 &lt;label&gt;Program&lt;/label&gt;
              &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt; 
  &lt;div&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>.affix {
    top: 1;
    width: 25%;
  }
  
  .affix-top {
    width: 25%;
  }
  
  .affix-bottom {
    width: 25%;
    position: fixed;
  }
  </code></pre>