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
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.
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: