JS: Scroll on-Function bei Page Reload?
Hallo zusammen,
Ich habe auf meiner Testhomepage mittels php eingestellt, wie sich der fixed header und die Elemente innerhalb verschieben & verkleinern sollen, wenn ich scrolle.
Das klappt auch alles einwandfrei! Problem ist nur dass wenn ich von oben nach unten scrolle, wird der Header so wie er es soll kleiner.
Wenn ich die Seite jetzt neu lade, wird mir aber erstmal wieder der große Header angezeigt, obwohl meine Scrollposition schon tiefer ist. Wie kann ich direkt bei Page-Reload die Funktion ausführen (ohne scrollen)?
Muss ja irgendwie mit PageYOffset gehen.
Danke im Voraus
4 Antworten
Du veränderst mit PHP Positionen von HTML Elementen?
document.body.scrollTop
Gibt einen Pixel-Wert zurück. Ist dieser 0, wurde nicht gescrollt.
Hier kannst du also bei Reload immer prüfen, ob man sich ganz oben auf der Seite befindet, oder bereits gescrollt hat.
Aber doch nicht mit PHP, sondern media queries in css
Ne hatte nen anderen hintergrund. Media Queries benutze ich zusätzlich, war aber in diesem Fall nicht möglich und musste den Style-Tag variabel hinzufügen und ggf. wieder entfernen (je nach Scrollhöhe)
Wie du schon richtig erkannt hast, kannst du mit pageYOffset die Position herausfinden, an die gescrollt wurde.
Du hast aber nichts konkretes genannt, wie du die Größe änderst. Aus diesem Grund kann dir hier leider niemand wirklich weiterhelfen.
Hier aber allgemeines Beispiel wie es funktioniert (JavaScript)
function adjustSize(y){
// Skript um die größe anzupassen
}
document.addEventListener('load', function(ev){
adjustSize(pageYOffset);
}
Und noch eine kleine Sache:
wenn du eine Frage stellst, solltest du immer Codeschnnipsel oder verlinkungen auf jsbin.com o.Ä. Seiten machen, dass man deinen Code nachvollziehen kann.
Liebe Grüße
Win7User
Ich nehme an, dass ich das abändern muss, aber wie?
$(window).on('scroll', changeHeaderHeight);
changeHeaderHeight ist natürlich meine Funktion
schreib einfach noch sowas dazu:
if ( document.body.scrollTop > 0 ) changeHeaderHeight();
In so einem Fall lohnt es sich mehr nur Javascript zu benutzen.
ja responsive mit verschiedenen Höhen und Breiten...
Aber danke dir für deine Antwort, war hilfreich