Sembra che questo sia un problema molto comunesono circa 10 post sull'affisso Bootstrap che non funziona. Sfortunatamente, nessuna di queste soluzioni sembra funzionare. La documentazione afferma di utilizzare gli attributi dei dati per applicare semplicemente l'attributo "data-spy" a qualsiasi elemento e quindi aggiungere .affix .affix-top e .affix-bottom al CSS. In questo modo, non succede nulla. La pagina web funge da affisso che non è nemmeno lì. So che il file CSS è lì quando ho appena aggiunto .bg-pink a uno dei div e diventa rosa. Se inserisco "affix" nella mia classe in uno di i div bloccheranno quell'elemento, ma distruggerà completamente qualsiasi formattazione del contenitore. Aurelia sta forse facendo qualcosa di divertente con js in background? Posso farlo funzionare da solo, ma non all'interno dell'app aurelia.

Documenti che sto seguendo: http://getbootstrap.com/javascript/#affix

Quello che segue è il modo in cui mi aspetterei che funzioni, ma apparentemente all'HTML non piace.

<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;
}

risposte:

Alla fine è stato un problema con il modo in cui Aurelia (qualsiasi SPA con un motore di template) gestisce jQuery. Mi è stato spiegato che

"Normalmente, quando si carica un plugin, il documento attenderà caricare, quindi utilizzare un selettore per trovare tutti i tag. Non c'è document.onload in Aurelia, in quanto "basato su template"

Inserendo il metodo allegato () della pagina sembra però consentire all'affisso di iniziare a lavorare sulla pagina. Questo codice è stato preso dal file bootstrap.js (in fondo alla 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);
})