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
