Avatar billede kovalt Nybegynder
24. oktober 2006 - 21:01 Der er 4 kommentarer og
1 løsning

Script der flytter div ned ved scroll

Hej

Jeg har en div på min side som indeholder en menu. Jeg ville meget gerne at denne menu følger med ned på siden når en bruger scroller nedad på min side.

Funktionen har jeg ligeledes set anvendt til reklamer på sider hvor der kan scrolles ned. Er der nogen der ligger ind med denne kode og som føler for at dele den :-)

/Kovalt
Avatar billede gider_ikke_mere Nybegynder
25. oktober 2006 - 00:12 #1
JS:

// JavaScript Document

<!-- Original:  Eddie Traversa (psych3@primus.com.au) -->
<!-- Web Site:  http://dhtmlnirvana.com/ -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
window.onerror = null;
var topMargin = 10;
var slideTime = 1000;
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
function layerObject(id,left) {
if (ns6) {
this.obj = document.getElementById(id).style;
this.obj.left = left;
return this.obj;
}
else if(ie4) {
this.obj = document.all[id].style;
this.obj.left = left;
return this.obj;
}
else if(ns4) {
this.obj = document.layers[id];
this.obj.left = left;
return this.obj;
  }
}
function layerSetup() {
floatLyr = new layerObject('floatLayer', pageWidth * .8);
window.setInterval("main()", 10)
}
function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
  }
}
function main() {
if (ns4) {
this.currentY = document.layers["floatLayer"].top;
this.scrollTop = window.pageYOffset;
mainTrigger();
}
else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
  }
}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin;
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY;
floatStart();
}
animator();
  }
}
function floatStart() {
var now = new Date();

this.A = this.targetY - this.currentY;
this.B = Math.PI / ( 2 * this.slideTime );
this.C = now.getTime();
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt;
this.A = this.A > 0 ? this.findHt : -this.findHt;
}
else {
this.D = this.currentY;
  }
}
function animator() {
var now = new Date();
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D;
newY = Math.round(newY);
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )document.all.floatLayer.style.pixelTop = newY;
if ( ns4 )document.layers["floatLayer"].top = newY;
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px";
  }
}
function start() {
if(ns6||ns4) {
pageWidth = innerWidth;
pageHeight = innerHeight;
layerSetup();
floatObject();
}
else if(ie4) {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
layerSetup();
floatObject();
  }
}
//  End -->



<body  onLoad="start()">

<DIV align="center" id="floatLayer" style="background-color:"red; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; position: absolute; height:10px; width:140px; left:0px; top:-100px;z-index: 100"><a style="{text-decoration: none; color: white;}" href="http://www.xxx/yyy.php">Hello World</a></DIV>
Avatar billede gider_ikke_mere Nybegynder
25. oktober 2006 - 00:15 #2
Bestemmer hvor langt ind på siden din layer skal ligge:
floatLyr = new layerObject('floatLayer', pageWidth * .8); (=80% fra venstre)

Bestemmer hvor hurtig scrollen skal foregå:
var slideTime = 1000; (=1 sekund)
Avatar billede gider_ikke_mere Nybegynder
25. oktober 2006 - 00:35 #3
Avatar billede kovalt Nybegynder
26. oktober 2006 - 22:12 #4
Takker for svaret.

Smider du et svar?
Avatar billede gider_ikke_mere Nybegynder
26. oktober 2006 - 22:34 #5
Ok.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester