Wie kann man den Code erst aktivieren, wenn er weiter unten steht?
Bei meiner Testseite habe ich Code im HTML & JS Format, der das Bild ab einem gewissen Scroll wert ändert, aber dieser Code befindet sich nicht am Anfang der Seite sondern weiter unten. Wenn ich bereits am Anfang der Seite scrolle, werden die Werte gezählt und wenn ich dann zum Code gelange, wird bereits das Endbild angezeigt. Wie kann ich sicherstellen, dass der Effekt erst eintritt wenn ich zum relevanten Abschnitt scrolle?
Html:
<a href="#!" class="brand-logo">
<img src="http://placekitten.com/200/200">
</a>
Javascript:
$(document).ready(function() {
$(window).on("scroll", function() {
var scrollPos = $(this).scrollTop();
if (scrollPos >= 1000) {
// Bild - 1
$(".brand-logo img").attr("src", "http://placekitten.com/300/300");
} else if (scrollPos >= 500) {
// Bild - 2
$(".brand-logo img").attr("src", "http://placekitten.com/400/400");
} else {
// Standard - Bild
$(".brand-logo img").attr("src", "http://placekitten.com/200/200");
}
});
});
LG
1 Antwort
Berechne halt die Scrollposition relativ zum Start der Box.
Ich würde das aber generell anders bauen. Du baust das so um, dass das "position"-Attribut so gesetzt ist, dass die Box mitscrollt und dann oben kleben bleibt ("sticky" ist da denke ich der passende Wert).
Sobal das passiert sollte dann das Scrollen der äußeren Box deaktiviert werden ("overflow"-Attribut). Und das der Box mit den Bildern wird aktiviert.
Mit dem Scroll-Wert desr Box mit den Bildern baust du dann eine Animation.
Sobald du in der Box ganz unten angelangt bist wird, sobald weitergescrollt wird, wieder auf den Scroll der äußeren Box gewechselt. Die position wird von "sticky" auf irgendetwas anderes gewechselt, damit die Box aus dem Sichtfeld gescrollt werden kann.
Und die Bilder, die platzierst du dann beispielsweise einfachd irekt untereinander in der Box. Der Overflow wird so eingestellt, dass die unteren Bilder anfangs verdeckt sind.
Das tolle an der Lösung ist auch, dass du recht wenig eingreifen musst. Die Box fügt sich in die Seite direkt ein, die Bilder kannst du evtl. auch ohne irgendwelche Effekte anzeigen. Dann musst du quasi nur vier Events betrachten:
- Die Box ist von unten am Seitenbeginn angekommen.
- Die Box wurde zum Ende gescrollt.
- Die Box ist von oben am Seitenbeginn angekommen.
- Die Box wurde zum Anfang gescrollt
Vielen Dank für die ausführliche Beschreibung! Dein Ansatz die Box mithilfe von sticky zu positionieren und dann Scroll-Ereignisse zu nutzen um Animationen auszulösen klingt interessant und machbar. Um das umzusetzen brauche ich eine Kombination aus CSS für die Positionierung und das Styling der Boxen sowie JavaScript um die Scroll-Ereignisse zu überwachen und Animationen auszulösen. Ich werd versuchen deine Antwort umzusetzen
LG