Nwlapcug.com


Come spostare la barra di navigazione sinistra durante lo scorrimento in HTML

Come spostare la barra di navigazione sinistra durante lo scorrimento in HTML


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

Istruzioni

1

Apri il documento di pagina Web spostare in sezione body del documento: trovare il codice bloccarti ha scritto che crea la barra di navigazione.

2

Aggiungere il seguente tag div prima quel blocco di codice:

< div id = "navBar1" >

3

Pasta "< / div >" - senza le virgolette..--dopo il blocco di codice. Al termine dell'operazione, il codice che crea la barra di spostamento sarà presente all'interno di un blocco div simile all'esempio riportato di seguito:

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

Il testo "NAV BAR CODE qui" rappresenta il blocco di codice che genera la tua barra di navigazione.

4

Sezione head del documento, aggiungere il seguente codice JavaScript:

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 che hai aggiunto alla sezione body del documento. L'evento Window. OnLoad chiama una funzione che consente di impostare un evento window.onscroll. La dichiarazione di window.onscroll determina la funzione JavaScript denominata "scrollObject" per eseguire ogni volta che si sposta la barra di scorrimento del browser.

5

Incollare questa funzione JavaScript sotto il codice elencato nel passaggio precedente:

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

Questo codice crea la funzione di scrollObject. Ottiene la posizione verticale corrente di scrollbar e memorizza tale 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. In questo modo la barra di spostamento spostare ogni volta che cambia il valore della scrollPosition.

6

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

Consigli & Avvertenze

  • Il valore di id del div che circonda la vostra barra di navigazione è "navBar1." È possibile utilizzare qualsiasi nome che ti piace per questo div. Se si modifica il nome, modificare il valore assegnato alla variabile navBarID utilizzata nel codice JavaScript.
  • Fare altri oggetti quali immagini e persino video spostano quando si scorre che circonda gli oggetti con il tag di apertura e chiusura div come descritto nella procedura.