Autor |
Nachricht |
-
gamingparadise
|
05.04.2010 um 19:29 (UTC) Titel: Design CSS : Klasse ab bestimmer Höhe mitfahren lassen ? |
|
|
Hey,
ich habe ja das Design CSS und möchte folgendes machen:
Also, links ist ja die Navigation (siehe hier : http://www.gamingparadise.de.tl/Home.htm ), Jedenfalls will ich, dass die Navigation ab einer bestimmten Höhe automatisch mitfährt. Wer es nicht versteht, genau so:
Wenn die Klasse ( hier die Navi ) den oberen Bildschirmbereich (top: 0px) erreicht, sie mitfährt, also dass sie dann gefixt ist. Ich habe es schon mit position:fixed; versucht aber dann bleibt die Navi ja dort, wo sie sich am Anfang befindet. Könnte mir irgendjemand einen Code dafür geben ?
Mfg
GamingParadise |
|
↑
|
|
|
-
gamingparadise
|
07.04.2010 um 13:35 (UTC) Titel: |
|
|
Weiß keiner was ? |
|
↑
|
|
|
-
gamingparadise
|
09.04.2010 um 12:34 (UTC) Titel: |
|
|
Push |
|
↑
|
|
|
-
abenteuergeschichte
|
09.04.2010 um 14:24 (UTC) Titel: |
|
|
|
|
↑
|
|
|
-
gamingparadise
|
10.04.2010 um 08:25 (UTC) Titel: |
|
|
Hey,
ja ganz genau so was ! Weißt du den Code dafür ? |
|
↑
|
|
|
-
abenteuergeschichte
|
|
↑
|
|
|
-
gamingparadise
|
10.04.2010 um 08:42 (UTC) Titel: |
|
|
Hey,
vielen Dank für die Codes. Ich werde das 2. mal ausprobieren, gib danach rückmeldung, ob es funktioniert. |
|
↑
|
|
|
-
gamingparadise
|
10.04.2010 um 08:54 (UTC) Titel: |
|
|
Hey,
ich habe jetzt mal das 2. Ausprobiert. Hat aber nicht funktioniert. Also habe ich es mit position:fixed und margin-bottom versucht. Jetzt sieht es so aus:
http://gamingparadise-test.de.tl/ .
Das ist ja das gewünschte Ergebnis. Nur noch ein Problem: Gibt es einen Codeschnipsel, mit dem man einstellen kann, dass die Navi ab bestimmter Höhe der Seite nicht mehr mitfährt ? |
|
↑
|
|
|
-
abenteuergeschichte
|
10.04.2010 um 08:56 (UTC) Titel: |
|
|
Zitat: Das ist ja das gewünschte Ergebnis
Da freue ich mich schon mal!
Zitat:
Gibt es einen Codeschnipsel, mit dem man einstellen kann, dass die Navi ab bestimmter Höhe der Seite nicht mehr mitfährt ?
wie meinst du das genau?
Das die Navigation irgendwann nicht mehr mitscrollt?
lg
Jonas
Zuletzt bearbeitet von abenteuergeschichte am 10.04.2010, 09:57, insgesamt einmal bearbeitet
|
|
↑
|
|
|
-
gamingparadise
|
10.04.2010 um 09:00 (UTC) Titel: |
|
|
abenteuergeschichte hat Folgendes geschrieben:
wie meinst du das genau?
Das die Navigation irgendwann nicht mehr mitscrollt?
lg
Jonas
Ja genau so. Also jetzt, z.B. das die Navi 10px unter dem Header stehen bleibt. |
|
↑
|
|
|
-
deezigns
|
10.04.2010 um 13:14 (UTC) Titel: |
|
|
Das funktioniert mit dem JavaScript.
Code: <script language=javaScript>
function setVariables(){
y1=-50;ob=1;max=20 // this max sets the distance from the top of the page
// "max" entspricht dem css "top"
if (navigator.appName == "Netscape") {
v=".top=";h=".left=";dS="document.";sD="";
y="window.pageYOffset";x="window.pageXOffset";iW="window.innerWidth";iH="window.innerHeight"
}
else {h=".pixelLeft=";v=".pixelTop=";dS="";sD=".style";
y="document.body.scrollTop";x="document.body.scrollLeft";iW="document.body.clientWidth";iH="document.body.clientHeight"
}
object="object1";
checkLocationA()
}
movex=0,movey=0,xdiff=0,ydiff=0,ystart=0,xstart=0
function checkLocation(){
// innerX=eval(iW)-115 // place to the right
innerX=21 // controls the horizontal from the left side of the page
// innerY=eval(iH)-35 // place at the bottom
innerY=16 // controls the verticle from the top of the page
if (document.layers){innerY-=10;innerX-=10}
yy=eval(y);
xx=eval(x);
ydiff=ystart-yy;
xdiff=xstart-xx;
if ((ydiff<(-0.01))||(ydiff>(0.01))) movey=Math.round(ydiff/10),ystart-=movey
if ((xdiff<(-0.01))||(xdiff>(0.01))) movex=Math.round(xdiff/10),xstart-=movex
N=(document.layers)?1:0
V=(N) ? 4:5
if (V==4){
object="nav"
eval(dS+object+sD+v+(ystart+innerY+10));
eval(dS+object+sD+h+(xstart+innerX+10));
//eval(dS + objectX + sD + v + y);
}
else{
object=document.getElementById('Nav')
object.style.top=ystart+innerY
object.style.left=xstart+innerX
//object=document.getElementById('object2')
//object.style.top=50+innerY
//object.style.left=50+innerX
}
setTimeout("checkLocation()",10)}
function checkLocationA(){
ystart=eval(y)+5;
xstart=eval(x)+5;}
spread=40
function scrollOn(){
items=5
if (ob<=items){
objectX="object"+ob;
y1+=10;
N=(document.layers)?1:0
V=(N) ? 4:5
if (V==4){
eval(dS + objectX + sD + v + y1);}
else{
object=document.getElementById(objectX)
object.style.top=y1}
//eval(dS + objectX + sD + v + y);
if (y1<max) xx=setTimeout ("scrollOn()",20)
else y1=-50, max+=spread, ob+=1, xx=setTimeout("scrollOn()",20) // this max sets the spacing
}
if (ob>5){clearTimeout(xx);checkLocation();}
}
</script>
füg den mal ein.
Ich hoffe ich hab beim modifizieren keinen fehler gemacht. Meine JavaScript kenntnisse sind nicht besonders gut.
gruß deezigns |
|
↑
|
|
|
-
gamingparadise
|
10.04.2010 um 16:22 (UTC) Titel: |
|
|
Hey deezings,
das funktioniert leider nicht. Du hast den Code nicht richtig modifiziert, ich habe es mittlerweile fast hingekriegt, nur leider geht die Box mit in den Header. |
|
↑
|
|
|
|