Affix: non cambia classe in affix-bottom, perchè?

Salve! Sono sempre io, quello che prima ha chiesto aiuto per uno script... mi ritrovo con un altro problema, anche questo sembra una scemità, ma ovviamente, dopo altre due ore a sbatterci la testa, non sono riuscito a risolverlo. Spero voi possiate aiutarmi. Sto utilizzando l'Affix (questo qui), che permette di cambiare classe a un elemento scendendo con lo scroll, e ho un problema: quando scrollo verso il basso, la classe viene cambiata da "affix-top" ad "affix", quando però supero la fine (quella indicata con bottom nello script) non cambia nulla!! Invece, superata quella, dovrebbe cambiare la classe in "affix-bottom". Ora...

Quì c'è un esempio funzionante (non fatto da me), dove potete vederlo in azione: http://jsfiddle.net/H9D4P/16/embedded/result/ (potete vedere il codice, cliccando in alto a destra su "edit in JSFiddle")

Qui c'è un altro esempio funzionante, leggermente diverso, ma il principio è quello: http://jsfiddle.net/C2hjP/

Qui invece c'è quello fatto da me dove NON funziona: http://jsfiddle.net/7edk7rb4/2/
(vedete! dovrebbe diventare rosso una volta superato "bye", mentre invece rimane uguale)
Chiedo quindi aiuto a voi. Come mai a me non funziona e agli altri due si?

Usa versioni più recenti delle librerie.

Anche cambiando librerie JQuery la cosa non cambia... ed è veramente assurdo, sto continuando a vedere siti che lo utilizzano tranquillamente e non riesco a capire perchè a me non va. Deve esserci un errore da qualche parte nel codice secondo me.

Il primo esempio che hai fornito è sbagliato (prova ad eliminare gli ultimi paragrafi). Il valore della proprietà bottom dell'oggetto che passi al metodo affix non è la distanza dal bordo superiore della pagina, ma quella dal bordo inferiore. Nel secondo esempio puoi vedere che il valore di bottom è 700, esattamente l'altezza di #footer. Controlla bene per quale versione di quale libreria sono stati sviluppati gli esempi, e cerca di usare sempre le ultime versioni delle librerie.

Ok, in effetti ho notato che il bottom funziona, ma non con quel css che avevo impostato io. Però ho notato che in alcuni casi invece di "attivarsi" lo script, va in una sorta di tilt, che mette e toglie l'affix-bottom a ripetizione man mano che scendi creando uno sfarfallio. Questo, ho notato con la funzione Ispeziona Elemento, è perchè lo script mette alla classe affix-bottom un position:relative (che nn so xche crea problemi). Ho provato a mettere mano allo script, scaricandolo, per togliere questo comando, ma non ci sono riuscito. Quindi chiedo aiuto a voi...

Qualcuno saprebbe togliere dallo script questa funzione? ossia: se lo script dice "affix-bottom ha css position:relative" mettere invece che l'affix-bottom non ha nessun css. In questo modo potrei controllare quella classe poi io da foglio di stile, senza avere sorprese, senza che mi aggiunga nulla che io non sappia che aggiunge. Spero di essermi spiegato bene. Sapreste modificarlo?

il file è questo: https://maxcdn.bootstrapcdn.com/boot...otstrap.min.js

Se serve, la pagina di download è questa: http://getbootstrap.com/getting-started/

UP: Leggevo adesso qui che quello sfarfallio di cui parlavo, potrebbe essere dovuto ad altro, seppur io mi ero convinto che fosse per colpa di un qualche contrasto tra le proprietà css...

Se guardi i vari esempi, per gli elementi con classe affix-bottom è specificato il posizionamento assoluto.
In questo modo non ci sono i problemi che descrivi: http://jsfiddle.net/7edk7rb4/6/

No, infatti non era quello il problema. Ma, forse è meglio se mi spiego meglio...

Questa è la pagina dove sto cercando di utilizzarlo, è una pagina pensata per il mobile (quindi non vi stupite se si vede un po uno schifo sul web). Provate ad aprirla con Chrome e vedrete che, superati i 700px della zona bottom e mentre si continua a scrollare verso il basso, la scritta "Info" nel menu in basso comincia a lampeggiare. Aprendo l'ispeziona elemento, può essere visto che questo è a causa di un continuo e ripetitivo cambiamento della classe da affix ad affix-bottom. Questo problema è gia stato riscontrato da altri e sembra sia un bug tipico di Bootstrap.

In questa discussione (spero di nn creare problemi nel linkarla), e nella 2a risposta di questa, hanno trovato la soluzione. L'unico problema è che io non so applicarla! Dicono di aggiungere il -webkit-backface-visibility: hidden; ma, ovunque io lo aggiunga non risolve l'errore. Ma agli altri l'ha risolto, quindi è chiaro che sono io a non capire a cosa va applicato quel css.

Voi riuscite a capirci qualcosa più di me? A dirmi dove va messa questa property css?
Grazie ancora per tutte le risposte fino ad ora, sei stato gentilissimo. Spero sia l'ultimo problema che ti pongo :)

Non credo che possa aiutare quella proprietà CSS. Anche perché il problema si manifesta pure su Firefox, e quella proprietà è specifica di WebKit.
Credo piuttosto che l'uso che stai facendo di affix sia un poco improprio, e per capire bene qual è il problema suppongo sia necessario andare a vedere esattamente come si comporta questa funzione. Puoi trovare il codice non compresso anche su GitHub https://github.com/twbs/bootstrap/bl...er/js/affix.js. Non è di immediata comprensione, e forse è più facile provare a seguirlo col debugger, in tal caso dovresti includere al posto della versione minificata tutti gli script presenti nella medesima cartella.