Hvordan du flytter navigasjonsfeltet til venstre når du blar i HTML

Hvis websiden har en viktig navigasjonsfelt som inneholder kritiske lenker og informasjon, holde navigasjonslinjen synlig ved å gjøre det bla når brukere flytter sine rullefelt. Javascript gjør dette spennende scroll effekt mulig. Hver nettleser har en spesiell HTML eiendom som inneholder den nøyaktige plasseringen av sin vertikale scrollbar. Synkronisere en venstre navigasjonsfeltet bevegelse med bevegelse av et nettsted besøkendes scrollbar hjelp av Javascript.

Bruksanvisning

1 Åpne nettsiders dokument flytte til dokumentets hoveddel: Finn kodeblokken du skrev som skaper navigasjonslinjen.

2 Legg til følgende div tag før at kodestykket:

<Div id = "navBar1">

3 Lim inn "</ div>" - uten anførselstegn - etter koden blokken. Når du er ferdig, vil koden som skaper navigasjonslinjen eksisterer inne i en div blokk som ligner på eksempelet nedenfor:

<Div id = "navBar1">
NAV BAR CODE HER
</ Div>

Den "NAV BAR CODE HERE" teksten representerer koden blokken som genererer navigasjonslinjen.

4 Legg til følgende Javascript-kode til dokumentets hodedelen:

Var navBarID = "navBar1";
Var bodyObject;
Var navBarObject;

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

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

Den navBarID variable holder id av div du lagt til dokumentets hoveddel. Window.onload hendelsen krever en funksjon som setter opp en window.onscroll hendelse. Den window.onscroll erklæringen fører til at Javascript-funksjonen som heter "scrollObject" for å kjøre når du flytter nettleseren scrollbar.

5 Lim denne Javascript-funksjonen under Kodene i forrige trinn:

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

Denne koden skaper scrollObject funksjon. Det blir rulle nåværende vertikale stilling og lagrer den stillingen i scrollPosition variabel. Den endelige uttalelsen setter den øverste plasseringen av div som inneholder navigasjonslinjen til lagret i scrollPosition verdi. Dette fører til navigasjonslinjen for å gå når verdien av scrollPosition endringer.

6 Lagre HTML-dokumentet og åpne den i nettleseren din. Rull ned websiden. Navigasjonslinjen flytter mens du ruller.

Hint

• Den id verdien av div som omgir navigasjonslinjen er "navBar1." Du kan bruke hvilket som helst navn du vil for denne div. Hvis du endrer navn, endre verdien tilordnet navBarID variabel som brukes i Javascript-kode.
• Gjør andre objekter, for eksempel bilder og til og med videoer beveger seg når du ruller av rundt disse objektene med åpning og lukking div koder som beskrevet i denne fremgangsmåten.