News - Features - Downloads - Forum - Team - Support - Switch View: Screen
Login - Registrierung - Passwort vergessen

Antworten: 10
Seite [1]
maGGiTech


Rock the board





Beiträge: 53
# Thema - 05.05.2014 um 11:16 Uhr
Hi, wollte mal fragen ob von euch jemand ein guten Guide hat für eine Scrollnavi die sich oben anheftet. Ich würde das gern mit ner kleinen Transition machen.

Position fixed hab ich schon ausprobiert, die Navi die ich jetzt habe ist nur ein bisschen zu kompliziert aufgebaut glaube ich.

Also ich möchte auch eine etwas andere Navi haben, die dann halt erscheint ab nem gewissen Punkt.

MfG


------------------
Mutligaming Community team-pheenix.de
Inaktiv
Tom08 ClanSphere Team

Supporter
Supporter



Herkunft: Daheim
Beiträge: 2923
# Antwort: 1 - 05.05.2014 um 12:21 Uhr
Ich hab deine Anfrage noch nicht so ganz verstanden:

Wenn man oben ist, die Navi nicht anzeigen, wenn man dann nach unten scrollt aber schon?

Und angeheftet so wie hier?
http://getbootstrap.com/getting-started/#whats-included

Grüße


------------------
Bei Problemen mit Code von mir bitte eine Private Nachricht an mich


Inaktiv
|
maGGiTech
Thread-Ersteller


Rock the board





Beiträge: 53
# Antwort: 2 - 05.05.2014 um 12:44 Uhr
Also die Navi soll oben ganz normal angezeigt werden, scrollt man jedoch runter erscheint eine andere navi die eingeblendet werden soll mit einer geringen Verzögerung als Übergang. Scrollt man wieder zum Anfang soll sie wieder verschwinden.

Ähnlich wie das bei gmx.net gemacht ist.

Also wenn ich oben bin so:



Und wenn ich runter scrolle und die Navie (die oben noch ist) verschwindet dann soll die hier erscheinen:


------------------
Mutligaming Community team-pheenix.de

Inaktiv
|
_Locke_


Going for pro





Beiträge: 537
# Antwort: 3 - 05.05.2014 um 13:43 Uhr
Brauchste javacript bzw. jQuery

Vielleicht ist das was für dich "Inhalte im Kontext der Scroll-Richtung anzeigen

- nach unten scrollen, verschwindet die Navigation aus dem Sichtfeld.
- wirdn ur kurz nach oben gescrollt, wird sie sofort wieder eingeblendet – unabhängig davon, wie weit entfernt sich die Navigation von der derzeitigen Scroll-Position befindet

Dateilink zur headroom.js



Inaktiv
|
MastaofDisasta


Try to beat me




Herkunft: Saarbrücken
Beiträge: 189
# Antwort: 4 - 05.05.2014 um 18:43 Uhr
Setze den div einfach als fixed das er sich nicht verschiebt reicht auch aus.


------------------
Grüße
MastaofDisasta

www.evonity-gaming.de

Inaktiv
|
Tom08 ClanSphere Team

Supporter
Supporter



Herkunft: Daheim
Beiträge: 2923
# Antwort: 5 - 05.05.2014 um 20:07 Uhr
05.05.2014 um 18:43 Uhr - MastaofDisasta:
Setze den div einfach als fixed das er sich nicht verschiebt reicht auch aus.

Dann zeig uns mal, wie das geht und dass das dann so aussieht wie auf den Screenshots.

Ohne JavaScript wirst du da wohl nichts werden... Aber ich hab da jetzt auch nicht direkt einen Tipp, wonach du suchen könntest o.ä.

Grüße


------------------
Bei Problemen mit Code von mir bitte eine Private Nachricht an mich


Inaktiv
|
palle ClanSphere Team

Supporter
Supporter




Beiträge: 3073
# Antwort: 6 - 05.05.2014 um 20:13 Uhr
http://stanislav.it/scroll-to-top-then-fixed-navigation-effect-with-jquery-and-c ss-free-download/


------------------
I like the part where it says 'nyan'



Inaktiv
|
MastaofDisasta


Try to beat me




Herkunft: Saarbrücken
Beiträge: 189
# Antwort: 7 - 05.05.2014 um 21:10 Uhr
Hier ohne javascript:
http://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-ba r-that-becomes-fixed-to-the-top-after-scroll


------------------
Grüße
MastaofDisasta

www.evonity-gaming.de

Inaktiv
|
palle ClanSphere Team

Supporter
Supporter




Beiträge: 3073
# Antwort: 8 - 05.05.2014 um 21:50 Uhr
Eigentor


------------------
I like the part where it says 'nyan'



Inaktiv
|
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
# Antwort: 9 - 05.05.2014 um 21:51 Uhr
da wird auch jscript genutzt


Inaktiv
|
Deaktiviert

Supporter
Supporter



Beiträge: 1287
# Antwort: 10 - 06.05.2014 um 15:17 Uhr
This feature of making and element "sticky" is built into the Twitter's Bootstrap and it is called Affix.

Quote: http://stackoverflow.com/a/14671576/2602480

Und das ist JavaScript und gehört zum Bootstrap Framework.


Inaktiv
|
Antworten: 10
Seite [1]


Sie müssen sich registrieren, um zu antworten.


ClanSphere Project - Mailus - Imprint - Disclaimer - Scriptinfo