Sidebar soll beweglich sein

Anett Hoffmann

Hallo,
ich möchte gern in mein Forum eine Sidbar einbauen.
Den Code hierfür habe ich schon, allerdings soll die Sidebar immer am Rande des Bildschirms erscheinen.

Sie soll also quasi mitwandern, wenn der User den Bildschirm nach unscrollt.

Zur Zeit sitzt sie im oberen Forenbereich fest. Man muss also immer wieder nach oben scrollen, um die Sidebar zu nutzen.

Was kann ich in meinen Code einbauen, damit die Sidebar beweglich ist?

HTML

<CMPELSE smspop></CMP smspop>
<USERMODE!1>
<title>(((forumname)))</title>
<SCRIPT language="JavaScript1.2"> 
<!-- 
/* 
© 2002 by nobody 
*/ 
// Default settings. Don't change them. 
YOffset=20; // no quotes!! 
staticYOffset=20; // no quotes!! 
slideSpeed=20 // no quotes!! 
waitTime=1000; // no quotes!! this sets the time the menu stays out for after the mouse goes off it. 
hdrFontFamily="Verdana"; 
hdrFontSize="3"; 
hdrFontColor="white"; 
hdrBGColor="#170088"; 
hdrAlign="right"; 
hdrVAlign="center"; 
hdrHeight="20"; 
linkFontFamily="Verdana"; 
linkFontSize="2"; 
linkBGColor="white"; 
linkOverBGColor="#DDDDDD"; 
linkTarget="_self"; 
linkAlign="left"; 
menuBGColor="white"; 
menuIsStatic="yes"; 
menuWidth=110; // Must be a multiple of 10! no quotes!! 
barBGColor="#444444"; 
barFontFamily="Verdana"; 
barFontSize="2"; 
barFontColor="white"; 
barVAlign="top"; 
barWidth=20; // no quotes!! 
NS6 = (document.getElementById&&!document.all) 
IE = (document.all) 
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4") 
moving=setTimeout('null',1) 
function kapelle() { 
 
kap=window.open("http://trmedia.covers.de/ass-alsfeld/kapelle.html","Fenster2","resizable=no,height=200,width=320"); 
} 
function moveOut() { 
if ((NS6 && parseInt(ssm.left)<0)||(IE && ssm.style.pixelLeft<0)||(NS && document.ssm.left<0)) { 
clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed) 
if (NS6) {ssm.left = parseInt(ssm.left)+10+"px";} 
if (IE) {ssm.style.pixelLeft += 10;} 
if (NS) {document.ssm.left += 10;}} 
else {clearTimeout(moving);moving=setTimeout('null',1)}}; 
function moveBack() { 
clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)} 
function moveBack1() { 
if ((NS6 && parseInt(ssm.left)>(-menuWidth))||(IE && ssm.style.pixelLeft>(-menuWidth))||(NS && document.ssm.left>(-menuWidth))) { 
clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed); 
if (NS6) {ssm.left = parseInt(ssm.left)-10+"px";} 
if (IE) {ssm.style.pixelLeft -= 10;} 
if (NS) {document.ssm.left -= 10;}} 
else {clearTimeout(moving);moving=setTimeout('null',1)}}; 
lastY = 0; 
function makeStatic() { 
if (NS6) {winY = window.pageYOffset;} 
if (IE) {winY = document.body.scrollTop;var NM=document.all('ssm').style} 
if (NS) {winY = window.pageYOffset;var NM=document.ssm} 
if (NS6||IE||NS) { 
if (winY!=lastY&&winY>YOffset-staticYOffset) { 
smooth = .2 * (winY - lastY - YOffset + staticYOffset);} 
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) { 
smooth = .2 * (winY - lastY);} 
else {smooth=0} 
if(smooth > 0) smooth = Math.ceil(smooth); 
else smooth = Math.floor(smooth); 
if (NS6) ssm.top=parseInt(ssm.top)+smooth+"px" 
if (IE) NM.pixelTop+=smooth; 
if (NS) NM.top+=smooth; 
lastY = lastY+smooth; 
setTimeout('makeStatic()', 1)}} 
function initSlide() { 
if (NS6){ 
ssm=document.getElementById("ssm").style 
ssm.visibility="visible"; 
ssm.left = -menuWidth;} 
else if (IE) { 
ssm.style.visibility = "visible" 
ssm.style.pixelLeft = -menuWidth;} 
else if (NS) { 
document.ssm.left = -menuWidth; 
document.ssm.visibility = "show"} 
if (menuIsStatic=="no") makeStatic();} 
function startMenu(menuHeader, barText) { 
if (IE||NS6) {document.write('<DIV ID="ssm" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+' ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')} 
if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')} 
if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><TR><TD>')} 
tempBar="" 
for (i=0;i<barText.length;i++) { 
tempBar+=barText.substring(i, i+1)+"<BR>"} 
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+(menuWidth-1)+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')} 
function addItem(text, link, target) { 
document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+(menuWidth-1)+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" CLASS="ssmItems" target="'+target+'">'+text+'</DIV></LAYER></ILAYER></TD></TR>')} 
function addExItem(text, link, target) { 
document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+(menuWidth-1)+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssmItems">'+text+'</DIV></LAYER></ILAYER></TD></TR>')} 
function addExPic(text, link, target) { 
document.write('<TR><TD cellpadding="2" BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+(menuWidth-1)+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssmItems"><img src="'+text+'" border="0"></A></DIV></LAYER></ILAYER></TD></TR>')} 
function addHdr(text) { 
document.write('<tr><td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+(menuWidth-1)+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')} 
function endMenu() { 
document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>') 
if (NS6){document.write('</TD></TR></TABLE>')} 
if (IE||NS6) {document.write('</DIV>')} 
if (NS) {document.write('</LAYER>')} 
if (NS6||IE||NS) setTimeout('initSlide();', 100)} 
YOffset=51; 
staticYOffset=51; 
slideSpeed=20; 
waitTime=100; 
menuBGColor="#66CC99"; 
menuIsStatic="no"; 
menuWidth=200; 
hdrFontFamily="Verdana, Arial, Helvetica, sans-serif"; 
hdrFontSize="1"; 
hdrFontColor="#000000"; 
hdrBGColor="#66CC99"; 
hdrAlign="left"; 
hdrVAlign="center"; 
hdrHeight="1"; 
linkFontFamily="Verdana, Arial, Helvetica, sans-serif"; 
linkFontSize="1"; 
linkBGColor="#E2E2E2"; 
linkOverBGColor="#CCFFCC"; 
linkAlign="left"; 
barBGColor="#66CC99"; 
barFontFamily="Verdana, Arial, Helvetica, sans-serif"; 
barFontSize="1"; 
barFontColor="#CCFFCC"; 
barVAlign="center"; 
barWidth=16; 
startMenu("Website", "Navigator"); 
addExItem("Naildesigner-Fachforum", "http://www.naildesigner-fachforum.de", "_blank");
addExItem("Naildesigner-Chat", "http://www.naildesigner-fachforum.de/wbb2/jgs_chat.php?sid=", "_blank");
addHdr("Extras"); 
addExItem("Galerie", "http://www.naildesigner-fachforum.de/wbb2/jgs_galerie.php?sid=", "_blank");
addExItem("Smilies I", "http://www.smiliez.de", "_blank"); 
addExItem("Smilies II ", "http://smilie-land.de/t/smilie.php?s=schilder_f", "_blank");
addExItem("Smilies III", "http://www.mysmilie.de/smilies/schilder/", "_blank");
addExItem("Smilies IV", "http://www.smiliehouse.de/index.php", "_blank");
addExItem("Schilder-Smilies ", "http://www.schildersmilies.de/index1.html", "_blank");
addHdr("Community"); 
addExItem("Hauptseite des Forums", "http://www.naildesigner-fachforum.de/wbb2/index.php?sid=", "_self");
addExItem 
("User-Wohnorte!", "http://www.naildesigner-fachforum.de/wbb2/map.php", "_self"); 
addExItem("Neue Themen", "http://www.naildesigner-fachforum.de/wbb2/search.php?action=new", "_self"); 
addExItem 
("FAQ", "http://www.naildesigner-fachforum.de/wbb2/misc.php?action=faq", "_self"); 
addHdr("Anmeldem/einloggen"); 
addExItem 
("Registrieren", "http://www.naildesigner-fachforum.de/wbb2/register.php", "_self"); 
addExItem 
("Login", "http://www.naildesigner-fachforum.de/wbb2/login.php?u=67", "_self"); 
addExItem 
("Logout", "http://www.naildesigner-fachforum.de/wbb2/logout.php?u=67", "_self"); 
endMenu(); 
//--> 
</SCRIPT>

Alles anzeigen

synaptic

zum einen sind die schaltflächen der codetags hier im editor dafür da genutzt zu werden.
zum anderen is das javascrpt nur sinnvoll für ie6, der ie7 und ff unterstützen position:fixed; !

Anett Hoffmann

Vielen Dank für Deine Antwort.
Habe den Code nun über die Codetags eingefügt.

Position:fixed habe ich geändert und siehe da, jetzt funktionierts.

Ein Problem habe ich aber noch: Und zwar ist das Menü ausgefahren, sobald ich auf die Forumsseite gelange oder das Browserfenster aktualisiere. Wie kann ich das noch ändern, dass das Menü eingefahren ist?

-----------
Vielen Dank und
liebe Grüße
Anett

synaptic

da wirste noch geduld mitbringen müssen, des kann ich mir erst heut abend angucken,hab vorher zuviel zu tun

edit, kann das prob so nich nachvollziehen, wenn ich deinen quelltext kopiere is das ding eingefahren..
schick mal nen link zu deinem problem

Tags