Stillestående (fixed) element på webside

[-Teddy-]

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 30. januar 2007 av -Teddy-

[tZar]

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.

[-Teddy-]

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.

[tZar]

Søk på setInterval og onScroll, så finner du nok noen nyttige eksempler Google er din venn

[-Teddy-]

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?

[tZar]

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.