Suche im Forum:
Suchen


Autor Nachricht
Beitrag05.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
Beitrag07.04.2010 um 13:35 (UTC)    
Titel:

Weiß keiner was ?
Beitrag09.04.2010 um 12:34 (UTC)    
Titel:

Push Exclamation
Beitrag09.04.2010 um 14:24 (UTC)    
Titel:

Beitrag10.04.2010 um 08:25 (UTC)    
Titel:

Hey,
ja ganz genau so was ! Weißt du den Code dafür ?
Beitrag10.04.2010 um 08:40 (UTC)    
Titel:

ich habe mal gesucht und ein paar Dinge gefunden, das eine müsste man mit
position:fixed; gestalten, sieht so aus:
http://www.cssplay.co.uk/layouts/fixed.html

und die andere Möglichkeit sieht dann so aus:
http://www.jswelt.de/showscript.php?artid=1004963056
und den Quelltext findest du hier:
http://www.jswelt.de/showsource.php?id=1004963056

ob dir das wirklich viel nützt weiss ich nicht, mehr habe ich leider
für's erste nicht gefunden.


lg
Jonas
Beitrag10.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.
Beitrag10.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 ?
Beitrag10.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
Beitrag10.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.
Beitrag10.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. Wink

gruß deezigns
Beitrag10.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.
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de