Navigation beim Scrollen Verschieben

[BlackScorp]

Hi leute,

ich brauche mal hilfe bei meiner Navigation. es geht um folgendes:

ich scrolle auf meiner seite runter/hoch und irgendwann ist die navigation nicht sichtbar und dann soll sie "nachkommen" wenn die nicht mehr sichtbar ist. mit css position:fixed klappt das alles nicht da meine navigation keine feste hoehe hat. bis jetzt habe ich das so gemacht:

  
unction scrollit()  
{  
var navi = document.getElementById('navi');  
  
var posNavi = navi.offsetTop+navi.offsetHeight;  
  
if(posNavi <=window.pageYOffset ){  
	navi.style.marginTop =window.pageYOffset+'px';  
}  
  
}  
  
window.onscroll = scrollit;  

funktioniert eigentlich nur sind da paar probleme:

1. die navi ist nicht oben am browser sondern immer in der mitte
2. wenn mein browser nicht vollbild ist sondern zur hälfte offen ist , dann scroll ich runter bis unentliche
3. die navigation geht nach unten aber nicht nach oben
4. sie taucht dann einfach so da auf aber ich würde gerne dass sie nach unten/oben "gleitet"

wer kann mir da weiterhelfen??

MFG

[Kalle_B]

Hi,

1. die navi ist nicht oben am browser sondern immer in der mitte

dein Element navi fehlt hier. Du setzt den Wert navi.style.marginTop, aber der Wert Top ist uns unbekannt. Er könnte für zusätzliche Pixel oben verantwortlich sein.

2. wenn mein browser nicht vollbild ist sondern zur hälfte offen ist , dann scroll ich runter bis unentliche

Ein Browser zur Hälfte nach unten offen? Dann läuft er doch aus ;-)

3. die navigation geht nach unten aber nicht nach oben

Ja, so hast du es bestimmt mit
if(posNavi <=window.pageYOffset )

navi wird nur neu gesetzt, wenn die Position kleiner gleich als pageYOffset ist. Wenn du nach oben scrollst, ist sie aber größer.

4. sie taucht dann einfach so da auf aber ich würde gerne dass sie nach unten/oben "gleitet"

Dann musst du nicht einen Sprung vollführen, sondern mehrere Einzelschritte. window.setTimeout ist dein Freund.

wer kann mir da weiterhelfen??

ich.

Kalle

[BlackScorp]

dein Element navi fehlt hier. Du setzt den Wert navi.style.marginTop, aber der Wert Top ist uns unbekannt. Er könnte für zusätzliche Pixel oben verantwortlich sein.

es hat kein top wert da die navi box float:left ist und ist qausi fest am layout. habe mit position absolute gemacht und dann den offsetTop wert geändert ging eigentlich wunderbar aber problem ist dass dann das außen div um das navi sich von der hoehe nicht anpasst weil es eben float:left ist. also so sieht das dann aus;

<div style="float:left;height:auto">
<div id="navi" style="float:left">
mit float left ist der navi IN dem div mit position ist er AUF dem div
</div>
</div>

Ein Browser zur Hälfte nach unten offen? Dann läuft er doch aus ;-)

naja nicht ganz ich will damit sagen es gibt keine begrezung nach unten da muss ich glaube mit document.body.innerHeight oder so vergleichen

navi wird nur neu gesetzt, wenn die Position kleiner gleich als pageYOffset ist. Wenn du nach oben scrollst, ist sie aber größer.

das ist mir schon klar aber wenn ich vergleiche ob navi top <= pageYOffset dann hat es den selben effekt wie position:fixed

Dann musst du nicht einen Sprung vollführen, sondern mehrere Einzelschritte. window.setTimeout ist dein Freund.

ich habe eigentlich gedacht dass ich sone abfrage machen wenn mein navi nicht im browser sichtbar erhöhe margin Top um 2px bis es sichtbar ist. dabei brauche ich mal hilfe:D

MFG

[ChrisB]

Hi,

es hat kein top wert da die navi box float:left ist und ist qausi fest am layout. habe mit position absolute gemacht und dann den offsetTop wert geändert ging eigentlich wunderbar aber problem ist dass dann das außen div um das navi sich von der hoehe nicht anpasst weil es eben float:left ist. also so sieht das dann aus;

<div style="float:left;height:auto">
<div id="navi" style="float:left">
mit float left ist der navi IN dem div mit position ist er AUF dem div
</div>
</div>

Na aber du willst doch, dass die Navigation aus dem Element "herausgenommen" wird, damit sie dann anderswo weiter unten auf der Seite angezeigt werden kann ...?

Also ich würde sowas schon mit absoluter Positionierung umsetzen.

MfG ChrisB

[BlackScorp]

Na aber du willst doch, dass die Navigation aus dem Element »»"herausgenommen" wird, damit sie dann anderswo weiter unten auf der Seite »»angezeigt werden kann ...?

naja wenn marginTop oder paddingTop wert sich ändert habe ich das selbe ergebnis als wenn ich top:xxpx setze