Sticky Navigation mit smooth slideDown Effekt

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

Ansophie

Mitglied
17 August 2019
95
2
8
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:

Ansophie

Mitglied
17 August 2019
95
2
8
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?!
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.913
370
83
67
Das hatten wir doch mit der früheren Variante schon Mal durchgespielt. Die Lösung erkennt man auf der Tierschutzseite: Die erste Nav nicht unsichtbar machen sondern durch das Scrollen nach oben verschwinden lassen.

Meine Empfehlung: Verwende für den Anfang nur einfache Effekte, wo Du verstehst, wie sie funktionieren und wodurch solche Nebeneffekte zu Stande kommen.
 
Zuletzt bearbeitet:

Ansophie

Mitglied
17 August 2019
95
2
8
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: