Gå til innhold

Stillestående (fixed) element på webside


Anbefalte innlegg

Skrevet (endret)

Hvordan lager jeg en div som står stille på siden uansett hvor mye brukeren scroller opp og ned? Bruker nå position: fixed;, men denne gjør at siden "lugger" når den scrolles. Javascript som oppdaterer seg hele tiden krever som regel for mye cpukraft og gjør at det hakker om man scroller fort. Om div'en oppdaterte seg per 500ms eller noe i den duren hadde det var knall!

 

Har funnet noe, men skjønner ikke helt hvordan jeg bruker det, kan noen forklare?

http://www.quirksmode.org/js/fixedmenu.html

// Noe jeg trenger for å kjøre det: http://www.quirksmode.org/js/dhtmloptions.html#versiona

Endret av -Teddy-
Videoannonse
Annonse
Skrevet

Bruk setInterval for å gjøre noe med et bestemt tidsinterval. Sjekk da i funksjonen som kjører ved det intervalet hvor diven befinner seg, og ev flytt den til riktig plassering hvis den er feil plassert.

 

Du kan også kikke på onscroll og kanskje bruke dette i stedet.

Skrevet

Det bør nevnes at jeg ikke har noen erfaring med javascript annet enn at jeg har tittet i sourcen og rotet litt med noen nå og da. Jeg skjønner hva du ber meg om å gjøre, men jeg aner ikke hvordan jeg skal gjøre det. :wee:

Skrevet

Jeg kan ikke skrive et slikt script selv, men jeg har jo det jeg fant på quirksmode. Der brukes "setTimeout" såvidt jeg kan se. Problemet er at jeg aner ikke hvordan jeg skal koble dette scriptet sammen med en <div> på websiden med rel= e.l.

 

Scriptet fra quirksmode:

Klikk for å se/fjerne innholdet nedenfor
var menu;
var theTop = 30;
var old = theTop;

window.onload = function () {
menu = new getObj('menu');
movemenu();
}

function movemenu()
{
if (window.innerHeight)
{
   pos = window.pageYOffset
}
else if (document.documentElement && document.documentElement.scrollTop)
{
 pos = document.documentElement.scrollTop
}
else if (document.body)
{
   pos = document.body.scrollTop
}
if (pos < theTop) pos = theTop;
else pos += 30;
if (pos == old)
{
 menu.style.top = pos;
}
old = pos;
temp = setTimeout('movemenu()',500);
}

 

Der jeg også trenger:

Klikk for å se/fjerne innholdet nedenfor
function getObj(name)
{
 if (document.getElementById)
 {
 	this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
 }
 else if (document.all)
 {
this.obj = document.all[name];
this.style = document.all[name].style;
 }
 else if (document.layers)
 {
   this.obj = document.layers[name];
   this.style = document.layers[name];
 }
}

 

Hvordan skal jeg kunne bruke dette opp mot en div?

Skrevet

En div med id=menu er såvidt jeg kan se alt som skal til. Da skal diven bli flyttet til riktig plass hvert halvsekund såfremt scrolltop er endret.

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...