• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sticky Navigation mit smooth slideDown Effekt

Ansophie

Mitglied
Hi,

Ich möchte folgendes Ziel erreichen:
1) Das nav soll nach dem scroll zunächst "verschwinden" und dann leicht zeitversetzt mit SlideDown-Effekt wieder von oben runter kommen und sticky bleiben.
2) das logo und der hamburger bzw. das menu sollten bereits "fixiert" im erscheinenden stickynav sein, damit es nicht springt.
3) wenn man wieder hochscrollt, soll es elegant wieder raufgehen und zu normalposition wechseln.

Hoffentlich lässt sich das umsetzen.

https://codepen.io/AnSophie/pen/jOWPXmy zeigt, wie es in etwa sein soll. den code hab ich nur kopiert, warum dieser ohne eindeutige einbindung der js funktioniert, ist mir schleierhaft. man sieht den link im developer, glaub ich.

Bisher hab ich zum Probieren in die Testseite bei Codepen eingefügt:
a) slideToggle - auf das stickynav angewendet, erfüllt es zwar Punkt 1, es hört aber dann nicht mehr auf zu toggeln - rutscht ohne stopp rauf und runter.
b) slideDown/slideUp mit .delay - für meine ersten Versuche, kommt das schon ein wenig an das ran, was ich mir von dem Effekt erwarte.

Daher hab ich mal damit weiterprobiert und die slideDown-Funktion mit .delay in die oberste Funktion im Script eingesetzt und das nav bzw. stickynav im css verändert - position: sticky; gegen position: fixed; getauscht, width:100%; und height: 97px; ergänzt.

Ergebnis:
der slideDown Effekt wird vielleicht nur zaghaft angedeutet (ist vielleicht auch Wunschdenken ;) ). man siehts deutlicher wenn "nav" angepinnt wird.
leider fällt negativ auf: es funktioniert, glaub ich, nur das erste Mal nach dem aktualisieren der Seite. Wenn wieder hochgescrollt wird, läuft es nicht geordnet ab und sieht nicht schön aus. Punkt 2 und 3 werden nicht erfüllt.

Zusatzfrage: leider gelingt mir das zusammenlegen mehrerer Funktionen im script unter einem $(document).ready(function () {"use strict"; ... nicht wirklich. Es werden ständig Fehler im editor angezeigt oder die Funktionen nicht ausgeführt.

Bitte um eure Unterstützung.

hier mein Code: https://codepen.io/AnSophie/pen/vYLgaxb

Edit 1: zu meinem Code via handy: das slideToggle funktioniert mehr schlecht als recht, slideDown ist gar nicht zu sehen.

Edit 2: wahrscheinlich besser als meine Zielbeschreibung, so wie in der desktopversion dieser Seite hätte ich es gern: https://tierschutzvolksbegehren.at/
(falls jmd Bedenken hat, es sind keine grauslichen Bilder auf der Startseite) - keine Werbung und kein Aktivismus.
 
Zuletzt bearbeitet:
Werbung:
Nach vielen Fehlversuchen, bin vielleicht doch ein bisserl weiter gekommen.

Das slideDown/slideUp funktioniert zwar, aber es toggelt einige Male, bevor es in der richtigen Position stehen bleibt (wenigstens das). :D


Würde das bitte jemand überprüfen und mir erklären wo der Fehler liegt?!
 
Ich bin mir zu 99.9% sicher, dass wir das nicht durchgespielt haben. Die frühere Variante war doch nur das clonedlogo - die andere baustelle. :wink:

Zum schluss hast du mir nur gesagt, ich soll mir das slidetoggle ansehen.
Das hab ich gemacht. habe mittlerweile 2 Pens (von zig offline-Versuchen) online gestellt.
info am rande: ein slideToggle per click ist logisch, aber per scrollTop nicht.

#2 pen: damit bin ich ja nochmal einen schritt zurück gegangen, hab das clonedlogo mal rausgelassen, damit ich es besser verstehen kann. noch mehr an den Anfang geht ja fast nicht, leider hab ich dafür auch nicht genug Zeit.

sicher hat die tierschutzseite die Lösung, ich kann den spezifischen jQueryCode für diesen Effekt zwar extrahieren, aber nicht im Detail aufschlüsseln, für mich ist das extrem komplex.
Die erste Nav nicht unsichtbar machen sondern durch das Scrollen nach oben verschwinden lassen.
wo wird ein nav unsichtbar gemacht? ich verwende weder hide(), noch display: none;.

Ich wollt ja nicht unhöflich sein und fragen, ob mir das jemand schreibt, deswegen probier ich ja wo ich kann. ohne vorlagen und Anleitung geht für mich aber nix mehr weiter. :frown:
 
Werbung:
Werbung:
du in einem Forum keinen Anspruch auf Antworten hast?
Ich erhebe doch keinen Anspruch auf Antworten oder vorgefertigte Lösungen. Aber wenn man seit fast 2 Wochen keine Antwort bekommt oder auf eine Antwort bei der man nicht ganz durchblickt, weitere fragen stellt und man dann keine Antwort bekommt, bleibt man ratlos zurück und man beginnt zu (ver-)zweifeln. Ich hab schon befürchtet, ich hab jemanden verärgert oder die Umsetzung ist megakompliziert und und und.

Vielleicht liegt es an deiner Problembeschreibung
Es ist nicht meine Absicht, etwas unklar zu formulieren. Das ich mich öfter mal kompliziert ausdrücke, weiß ich. Liegt wohl auch teilweise daran, weil ich versuche ein Problem zu beschreiben und ich den Wald vor lauter Bäumen nicht mehr sehe.

Ich freu ich mich aber wenn jemand nachfragt, ich weiß ja nicht was wem unklar ist - das trägt ja schließlich auch zur Problemlösung bei.

du hast das ignoriert:
Ich hab sempervivums post keineswegs igoriert, ich habe das befolgt was er mir schon in einem anderen thread geraten hat, und bin bereits "für den anfang" einen schritt zurückgegangen - siehe #2.

#4 ist schon eine Antwort auf seinen post - halt mir weiteren Fragen.

slideToggle, slideDown usw. sind einfache Effekte, wenn sie alleine stehen. aber in der Kombination ist es schon etwas schwieriger.

Ich kann mir den Nebeneffekt nicht erklären, deswegen habe ich ja euch Experten gefragt. Ich dachte dazu ist das Forum da.
 
Würde das bitte jemand überprüfen und mir erklären wo der Fehler liegt?!
Das liegt an dein Javascript.
Dein Scroll Event feuert bei jeden Pixel was du Scrolls.
Wenn du jetzt von 0 bis 200 Pixel Scrollst kann dein Event bis zu 200 mal feuern.
Deswegen Tanzt deine Navigation da rum.
Jetzt weißt du was du ändern mußt.

EDIT:
Habe gerade mal versucht das problem zu lösen.
Ich habe es mit hasClass gemacht und das slideDown und slideUp mit Css geregelt.
Bei mir Funktioniert es so.

Gibt bestimmt noch andere möglichkeiten doch da groß rumzuspielen fehlt mir gerade die Zeit zu.
 
Zuletzt bearbeitet:
Danke für deine Antwort Basti!

tatsächlich..schon wieder eine Endlosschleife, das ich gleich wieder in denselben Fehler reintapse hätt ich nicht gedacht - da hab ich wohl nen blinden fleck.

Ganz ist es mir zwar nicht klar, weil ich mich eigentlich an die den Grundcode von sempervivum und den apis gehalten habe. in den anderen Beispielen steht doch auch immer ($(this).scrollTop() > 200), aber naja.

bin jetzt zum code (bei dem mir sempervivum geholfen hat) zurückgekehrt und habs gleich dort eingesetzt.
Wenigstens schon ein bisserl richtiger als vorher.

Was leider nicht passt:
1) das nav verschwindet zu früh, obwohl die höhe doch erst bei 380 liegt
2) slideDown sieht schon besser aus, aber holpert am schluss
3) wenn ich wieder hochscrolle, schaut das slideUp nicht schön aus - das clonedlogo verschwindet irgendwie zu spät und das nav verschwindet ganz.

warum ist das so?
 
Werbung:
Ich habe das Thema von dir und @Sempervivum nur grob verfolgt.
Wenn er da den Code benutzt hat wird er das auch richtig angewendet haben.( da bin ich mir sicher )
Ich sehe nur das was du hier gespostet hast.
Kuck mal hier

Zur Lösung

sollte das ungefähr so aussehen.
 
Zuletzt bearbeitet:
Tut mir leid, jetzt hab ich glatt vergessen den neuen pen einzufügen.


Geht das slidedown am handy? Oder nur grad auf codepen nicht?

Werd mir deinen pen nach dem frühstück in ruhe ansehen.
 
Ich glaube ich habe das etwas falsch erklärt mit den feuern:mad:

Aber zu deinen Pen.
Ist das nicht das Script was du mit Sempervivum schon erstellt hast ?
Da wahr doch zum Schluß alles Funktionstüchtig oder nicht ?
Vieleicht solltest du ihn mal lieb fragen ob er da nochmal helfen kann bevor ich da anfange dran rumzuspielen.

Das problem ist das jeder seinen eigenen Lösungsweg hat.
Du weißt ja schon etwas wie er arbeitet und seinen Code wirst du hoffentlich auch mitlerweile verstehen( solle so sein wenn man lernen will).
Falls ich einen anderen Lösungsweg nehme ,mit dir noch unbekannten wegen würdest du durch einander kommen.

Außerdem sollte man versuchen fremden Code nicht umzuarbeiten, nur wenn es sein muß.
Und versuche es nochmal selber und wenn es dann immer noch stockt dann sag bescheid.
 
Werbung:
Ist das nicht das Script was du mit Sempervivum schon erstellt hast ?
Da wahr doch zum Schluß alles Funktionstüchtig oder nicht ?

Ja, das ist das Script. Es ist auch alles immer noch funktionstüchtig und der Code ist unverändert.

Ich habe lediglich bei "if" .slideDown(500) und bei "else" .slideUp(500) ergänzt.


@Sempervivum Bitte, lieber sempervivum, könntest du mir auch bei dieser Baustelle helfen?!

Hier nochmal aus meinen posts #10 und #12 zusammengefasst:

Probleme, die so nicht bleiben können:
1) das nav verschwindet zu früh

2) slideDown holpert am schluss

3) beim hochscrollen: verhält sich das slideUp nicht optimal.
Das Logo verschwindet zur Seite, das "normale" nav verschwindet danach ganz und ist nur wieder sichtbar, wenn man die Seite aktualisiert.

4) Ignoriert nur codepen die js-Funktionen in der mobilen Version, oder braucht es für mobile Geräte extra Code?

 
Zurück
Oben