DIV soll beim Scrollen der Seite mitscrollen von juppinger, 12.07.2006 15:09

DIV soll beim Scrollen der Seite mitscrollen

juppinger 12.07.2006 15:09

javascript

Hallo zusammen,

ich habe ein Script, welches mir einen DIV-Bereich beim Scrollen der Seite mitscrollt.

Jedoch folgendes Problem:
Das DIV-Element "springt" quasi beim Scrollen nach unten bzw. oben.- Schöner wäre es, wenn der DIV aber fein mitrutscht und das "springen" vermieden werden könnte.

Anbei mein Script.

Ich bin über jede Hilfe sehr sehr dankbar.

Gruss
juppinger

MEIN SCRIPT:

<html>
<head>
<title>mitscrollen</title>
</head>

<body>

<!--

ns4 = (document.layers)? true:false

ie = (document.styleSheets&&document.all)? true:false

ns6 = document.getElementById&&!document.all;

opera= (document.all&& !document.styleSheets)? true:false;

top_position = 150;

function move_sticky() {

if (ie) {

document.all.stickydiv.style.top=document.body.scrollTop+top_position;

}

if (ns6||opera) document.getElementById("stickydiv").style.top=pageYOffset+top_position;

if (ns4) document.stickydiv.top=pageYOffset+top_position;

setTimeout("move_sticky()",200);

}

if (! ns4) {

document.write('<div id="stickydiv" style="position:absolute;top:'+top_position+'px;left:795px;z-index:2">');

}

move_sticky();

//-->

</script>

Dies ist ein Testtext :-)

</div>

</script>

</body>
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

DIV soll beim Scrollen der Seite mitscrollen
Axel Richter 12.07.2006 16:07

javascript
– Informationen zu den Bewertungsregeln
Hallo,

ich habe ein Script, welches mir einen DIV-Bereich beim Scrollen der Seite mitscrollt.

Hm, es sieht eher so aus, als sollte das DIV("Dies ist ein Testtext :-)") _nicht_ mitscrollen, also imme an Position top:150px; am rechten Seitenrad bleiben.

Hierfür benötigt man für moderne Browser kein JavaScript mehr. Das geht mit CSS position:fixed. Für den IE (bis 6) benötigt man Workarounds, weil dieser position:fixed nicht umsetzt. Manchmal kommen diese Workarounds auch ohne JavaScript aus.
```
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>CSS position:fixed</title> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
<style type="text/css"> 
* { margin:0; padding:0; } 
#content {background-color:#00FFAF;} 
#fixed {background-color:#FF7F7F; position:fixed; top:150px; right:0;} 
</style> 
 
 
 
</head> 
<body> 
<div id="fixed">Das ist ein Testtext ;-)</div> 
<div id="content"> 
Das ist der bewegliche Seiteninhalt mit beliebig viel Text ... 
 
</div> 
</body> 
</html> 
```
Erläuterung:
Für moderne Browser wird einfach position:fixed verwendet.

Für den IE wird ein Conditional Comment eingesetzt, in dem _nur_ für ihn HTML und BODY in der Höhe auf 100% Browserfensterhöhe begrenzt werden und keinen überfließenden Inhalt mehr anzeigen (overflow:hidden;). Dadurch wird das DIV#content zum eigentlichen BODY mit 100% Browserfensterhöhe, welcher bei überfließendem Inhalt Scrollbalken anbietet (overflow:auto;). Da das DIV#fixed nun außerhalb dieses Pseudo-BODYs liegt, wirkt position:absolute hier nun ähnlich wie position:fixed.

viele Grüße

Axel
Beitrag melden

–
Informationen zu den Bewertungsregeln
DIV soll beim Scrollen der Seite mitscrollen
Bernhard Wagner Homepage des Autors 12.07.2006 18:41

javascript
– Informationen zu den Bewertungsregeln
Hallo,
versuch mal folgendes:

function mein() {
var a = 5;
var b = 5;
if (window.innerWidth > 950 || document.body.offsetWidth > 950){
a = 100;
}

if (window.pageYOffset){
 if (window.pageYOffset < 100)
 {b = 180;}
 else
 {if (window.pageYOffset > 1100)
 {b = 1100;}
 else
 {b = 1 + window.pageYOffset;}
 }}
 else
 {if (document.body.scrollTop < 100)
 {b = 180;}
 else
 {if (document.body.scrollTop > 1100)
 {b = 1100;}
 else
 {b = 1 + document.body.scrollTop;}
}}
document.getElementById("so").style.visibility = "visible";
document.getElementById("so").style.left= a + "px";
document.getElementById("so").style.top= b + "px";
window.setTimeout("mein()",1);
}

Die ID des Div mußt du noch anpassen und schau dir die Werte noch mal genau an, ich hab das für unterschiedliche Fensterbreiten gemacht. Die Funktion muß mit onLoad im body gestartet werden.
Gruß Bernhard
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

juppinger: DIV soll beim Scrollen der Seite mitscrollen