Se la pagina Web ha un importante barra di navigazione contiene collegamenti critici e le informazioni, mantenere la barra di navigazione visibile rendendolo scorrere quando gli utenti spostano le loro barre di scorrimento. JavaScript rende possibile questo effetto di scorrimento intrigante. Ogni browser ha una proprietà HTML speciale che contiene la posizione esatta del suo scorrimento verticale. Sincronizzare il movimento di una barra di navigazione di sinistra con il movimento di scorrimento di un visitatore del sito utilizzando JavaScript.

istruzione

1 Aprire il documento pagina Web mossa per la sezione corpo del documento: Trovare il blocco di codice che hai scritto che crea la vostra barra di navigazione.

2 Aggiungere il seguente tag div prima di quel blocco di codice:

<Div id = "navBar1">

3 Incolla "</ div>" - senza virgolette - dopo il blocco di codice. Una volta fatto, il codice che crea la barra di navigazione esisterà all'interno di un blocco div simile all'esempio riportato di seguito:

<Div id = "navBar1">
NAV CODICE A BARRE QUI
</ Div>

Il "codice a barre NAV QUI" testo rappresenta il blocco di codice che genera la barra di navigazione.

4 Aggiungere il seguente codice JavaScript per sezione head del documento:

var navBarID = "navBar1";
var bodyObject;
var navBarObject;

window.onload = function () {
var bodyObject = document.getElementsByTagName ( 'body') [0];
var navBarObject = document.getElementById (navBarID);
navBarObject.style.position = "assoluto";

window.onscroll = function () {
scrollObject (bodyObject, navBarObject);
}
}

La variabile navBarID contiene l'id del div si è aggiunto alla sezione corpo del documento. L'evento window.onload chiama una funzione che imposta un evento window.onscroll. La dichiarazione window.onscroll fa sì che la funzione JavaScript denominata "scrollObject" per eseguire ogni volta che si sposta barra di scorrimento del browser.

5 Incolla questo funzione JavaScript sotto il codice elencato nel passaggio precedente:

Funzione scrollObject (bodyObject, navBarObject) {
var = scrollPosition document.body.scrollTop || document.documentElement.scrollTop;
navBarObject.style.top = (scrollPosition + 100) + "px";
}

Questo codice crea la funzione scrollObject. Ottiene la posizione verticale corrente della barra di scorrimento e negozi che la posizione nella variabile scrollPosition. La dichiarazione finale imposta la posizione superiore del div che contiene la barra di navigazione per il valore memorizzato in scrollPosition. Questo fa sì che la barra di navigazione per spostare ogni volta che il valore della scrollPosition cambia.

6 Salvare il documento HTML e aprirlo nel browser. Scorrere la pagina Web. La barra di navigazione si muove durante lo scorrimento.

Consigli e avvertenze

• Il valore id del div che circonda la vostra barra di navigazione è "navBar1." È possibile utilizzare un nome a piacere per questo div. Se si modifica il nome, modificare il valore assegnato alla variabile navBarID utilizzato nel codice JavaScript.
• Fare altri oggetti quali immagini e persino video si muovono quando si scorre circondando quegli oggetti con l'apertura e chiusura tag div come descritto in questi passaggi.