Kevin Vasko Kevin Vasko - 1 year ago 168
CSS Question

Bootstrap affix not working with data attributes in aurelia

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.

Docs I am following:

The following is the way I would expect it to work, but apparently HTML doesn't like it.


<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!-- selection menu bar -->
<div class="well well-lg" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
<!-- My content that should be locked -->


.affix {
top: 1;
width: 25%;

.affix-top {
width: 25%;

.affix-bottom {
width: 25%;
position: fixed;

Answer Source

It ended up being a problem with the way Aurelia (any SPA with a templating engine) is handling the jQuery. It was explained to me that that

"Normally, when you load a plugin it will wait for the document to load, then use a selector to find all the tags. There is no document.onload in Aurelia, as it's template based"

Putting in the attached() method of the page seems to enable the affix to start working on the page though. This code was taken from the bootstrap.js file (very bottom as of 3.3.6.

  $('[data-spy="affix"]').each(function () {
  var $spy = $(this)
  var data = $

  data.offset = data.offset || {}

  if (data.offsetBottom != null) data.offset.bottom = data.offsetBottom
  if (data.offsetTop    != null)    = data.offsetTop

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download