nicht angemeldet
Menü soll mitscrollen
Mahlzeit !!!!
Ich hab zwei Layer (vereinfacht) links das Menü und rechts den Content, nun möcht ich das beim Scrollen das Menü (linker Layer) mitscrollt.
jemand ne Idee wie ich anstellen kann ?
MFG Jens
-
Mahlzeit !!!!
Ich hab zwei Layer (vereinfacht) links das Menü und rechts den Content, nun möcht ich das beim Scrollen das Menü (linker Layer) mitscrollt.jemand ne Idee wie ich anstellen kann ?
MFG Jens
Hallo Jens
muss er in JavaScript sein? I dhtml hätte ich ein Script, dass vieleicht deinen Anforderungen entspricht!
Gruss Danielschreib mir bitte eine E-Mail zurück, weil ich dir sonst nicht garantieren kan, dass ich zurückschreibe: webmaster@verkehrsverein-hinwil.ch
-
versuchs mal hiermit...
<html> <STYLE type=text/css> #slide { Position: Absolute; Left: 5; Top: 110; Visibility: Visible; } A:LINK {text-decoration: none;} A:VISITED {text-decoration: none;} TD {font-family:arial;} BODY {Margin-Left: 120;} </STYLE> <span ID="slide"> <table CELLSPACING="0" BORDER="0" CELLPADDING="0" ALIGN="left" > <TR><td><HR></td></TR> <TD><A href="#">Startseite</A></TD> </TR> <tr> <td><A href="#">Punkt 1</A></td> </tr> <tr> <td><A href="#">Punkt 2</A></td> </tr> <tr> <td><A href="#">Punkt 3</A></td> </tr> <tr> <td><A href="#">Punkt 4</A></td> </tr> <tr> <td><A href="#">Punkt 5</A></td> <tr> <td><A href="#">Punkt 6</A></td> </tr> <TR><td><hr></td></TR> <TR><td><font color=#ffffff>Grafiken auch</font></td></TR> <TR><td><hr></td></TR> </table> </span>
<script LANGUAGE="JavaScript">
self.onError=null;
currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1: 0;
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) { percent = .1 * (diffY - lastScrollY); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.slide.style.pixelTop += percent; if(NS) document.slide.top += percent; lastScrollY = lastScrollY + percent; } if(diffX != lastScrollX) { percent = .1 * (diffX - lastScrollX); if(percent > 0) percent = Math.ceil(percent); else percent = Math.floor(percent); if(IE) document.all.slide.style.pixelLeft += percent; if(NS) document.slide.left += percent; lastScrollX = lastScrollX + percent; } }
function checkFocus(x,y) { var totalY, totalX; floatx = document.slide.pageX; floaty = document.slide.pageY; floatwidth = document.slide.clip.width; floatheight = document.slide.clip.height;
if(20 == 0) totalY = floatheight; else totalY = 25; if(0 == 0) totalX = floatwidth; else totalX = 0; if( (x > floatx && x < (floatx+totalX)) && (y > floaty && y < (floaty+totalY))) return true; else return false; }
function grabIt(e) { if(IE) { whichIt = event.srcElement; while (whichIt.id.indexOf("slide") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop);
if(20 == 0) totalY = whichIt.style.pixelHeight; else totalY = 20; if(0 == 0) totalX = whichIt.style.pixelWidth; else totalX = 0; if(!(event.clientX > whichIt.offsetLeft && event.clientX < whichIt.offsetLeft + totalX) || !(currentY > whichIt.offsetTop && currentY < whichIt.offsetTop + totalY)) whichIt = null; } else { window.captureEvents(Event.MOUSEMOVE); if(checkFocus (e.pageX,e.pageY)) { whichIt = document.slide; FloatTouchedX = e.pageX-document.slide.pageX; FloatTouchedY = e.pageY-document.slide.pageY; } } return true; }
function moveIt(e) { if (whichIt == null) { return false; } if(IE) { newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY; if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; event.returnValue = false; } else { whichIt.moveTo(e.pageX-FloatTouchedX,e.pageY-FloatTouchedY); if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; return false; } return false; }
function dropIt() { whichIt = null; if(NS) window.releaseEvents (Event.MOUSEMOVE); return true; }
if(NS) { window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); window.onmousedown = grabIt; window.onmousemove = moveIt; window.onmouseup = dropIt; } if(IE) { document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; }
if(NS || IE) action = window.setInterval("heartBeat()",1);
</script> <body bgcolor="#000000" text="#ffffff" link="#ff5555" alink="#ff0000" vlink="#999999"> <center>Scroll doch mal ein bisschen und ud siehst das Ergebniss!!!</center> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> </body> </html>
-
-
Hi!
Ich hab zwei Layer (vereinfacht) links das Menü und rechts den Content, nun möcht ich das beim Scrollen das Menü (linker Layer) mitscrollt.
jemand ne Idee wie ich anstellen kann ?Da brauchste kein JS dazu, das geht mit CSS.
<DIV STYLE="position:fixed; [hier positionsangaben]">
</DIV>Siehe
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#positionGeht aber natuerlich nur mit Browsern, die CSS koennen.
So long