Esto parece ser un problema muy común ya que hayson aproximadamente 10 publicaciones sobre el afijo Bootstrap que no funciona. Desafortunadamente, ninguna de esas soluciones parece funcionar. La documentación indica que se deben usar atributos de datos para simplemente aplicar el atributo "espía de datos" a cualquier elemento y luego agregar el .affix .affix-top y .affix-bottom al css. Al hacer esto, en realidad no sucede nada. La página web actúa como un afijo que ni siquiera está allí. Sé que el archivo CSS está ahí, ya que acabo de agregar .bg-pink a uno de los divs y se volvió rosa. Si pongo "afijo" en mi clase en uno de el divs bloqueará ese elemento, pero destruirá completamente el formato del contenedor. ¿Es posible que aurelia esté haciendo algo divertido con el js en segundo plano? Puedo hacer que funcione solo, pero no dentro de la aplicación aurelia.

Documentos que estoy siguiendo: http://getbootstrap.com/javascript/#affix

La siguiente es la forma en que esperaría que funcionara, pero aparentemente a HTML no le gusta.

<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 -->
<label>Program</label>
</div>
</div>
</div>
<div>

CSS

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

.affix-top {
width: 25%;
}

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

Respuestas

Terminó siendo un problema con la forma en que Aurelia (cualquier SPA con un motor de plantillas) está manejando el jQuery. Me explicaron que eso

"Normalmente, cuando carga un complemento, esperará a que el documento cargar, luego use un selector para encontrar todas las etiquetas. No hay document.onload en Aurelia, ya que está "basado en plantillas"

Sin embargo, poner el método adjunto () de la página parece permitir que el afijo comience a funcionar en la página. Este código fue tomado del archivo bootstrap.js (muy inferior a partir de 3.3.6.

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

data.offset = data.offset || {}

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

$spy.affix(data);
})