Come hai accennato al suggerimento sul sito demo scrollfix:
Ricorda che questa direttiva aggiunge solo una classe ui-scrollfix all'elemento. Spetta a te aggiungere le regole CSS corrispondenti, tuttavia ti dà anche la possibilità di aggiungere altre regole, se preferisci.
Quindi questa direttiva funziona in modo che una singola classe CSS ui-scrollfix viene aggiunto l'elemento ogni volta che viene raggiunta la condizione di scorrimento, e la classe viene rimosso in altro caso (quando si scorre indietro verso l'alto). Pertanto è tua responsabilità aggiungere stile CSS corretto.
È possibile farlo aggiungendo un'altra classe o ID CSS all'elemento e definire lo stile CSS corretto per i due casi, quello normale e quello fisso mentre si scorre verso il basso. Ad esempio, è possibile avere qualcosa di simile in voi codice:
<div ui-scrollfix="+100" class="yourclass">test</div>
Si può avere qualsiasi styling applicata in questo stato normale:
.yourclass {
/* your CSS code, 100px from the top of the page */
}
Quando i ui-scrollfix incendi condizione (in questo caso abbiamo impostarlo su +100, quindi quando lo scorrimento della pagina è aumentato di 100 px dopo l'elemento), all'elemento <div> verrà aggiunta un'altra classe:
È possibile utilizzare questo per impostare il corretto stile CSS:
.yourclass.ui-scrollfix {
position:fixed;
top:0;
}
Here is a demo che utilizza la direttiva sulla barra di navigazione superiore che è assolutamente posizionato 100px dalla parte superiore della pagina, e mentre si scorre verso il basso che rimanga riparato sulla parte superiore della pagina. Analogamente, il secondo (intitolato "Second Navbar") si colloca al di sotto di quello superiore. Il codice CSS che sto utilizzando per la barra superiore è:
.navbar-fixed-top {
position:absolute;
top:100px;
}
.navbar-fixed-top.ui-scrollfix {
position: fixed;
top:0;
}
Inoltre, penso che sia importante ricordare che ui-scrollfix="+100" significa che la classe ui-scrollfix verrà aggiunta all'elemento quando la parte superiore dei rotoli viewport 100px dopo l'elemento. Se desideri che l'elemento ottenga la classe CSS ui-scrollfix mentre raggiunge la parte superiore della finestra, puoi aggiungere ui-scrollfix="+0".
Spero che questo aiuti.
thx per quel suggerimento !!!! – Joerg
Prego! – van100j