Mam darmowy szablon strony WWW z fajnym pływającym menu. Działa to w ten sposób, że przewijając zawartość strony w dół, przy menu zmienia się tło i kolory liter, oraz podąża ono razem ze stroną. Odpowiada za to poniższy kod js:
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop() + 90;
var currentArea = $("section").filter(function() {
return scroll <= $(this).offset().top + $(this).height();
});
$(".nav a").removeClass("selected");
$(".nav a[href=#" + currentArea.attr("id") + "]").addClass("selected");
if ($(window).scrollTop() > 100) {
$('nav').addClass("navScroll");
$('img.logo').addClass("logoScroll");
$('div.menu').addClass("menuScroll");
} else if ($(window).scrollTop() < 100 ) {
$('nav').removeClass("navScroll");
$('img.logo').removeClass("logoScroll");
$('div.menu').removeClass("menuScroll");
}
});
});
Wychodzi na to, że zamieniana jest klasa "nav" na "navScroll" - która z kolei jest definiowana przez CSS w osobnym pliku. Do tej pory wszystko super, ale chciałbym w menu umieścić logo, które po przescrollowaniu w dół zmieniałoby kolor. Potrzebuję do tego dwóch obrazków: pierwszy - który jest wyświetlany od początku i drugi, w innym kolorze, który zostanie wyświetlony po przesrollowaniu w dół (o wartość 100, jak wynika z kodu).
W szablonie nie było żadnego obrazka, tylko zwykły napis, który jest doskonale podatny na zmiany za pomocą dwóch css, zmienianych przez powyższy kod.
Co tutaj mógłbym zrobić, żeby powyższy kod podmieniał mi obrazki? Jeżeli coś tworzę w css do "navScrol" to nic nie daje, bo nie ma komendy do wstawiania zdjęć w css, a background-image url("ścieżka obrazka") nie działa, nawet jak dodam jakiś selektor, czy określę width i height.
Będę bardzo wdzięczny za sugestie, co można zrobić żeby podmieniało mi obrazki? Czy może do tego służyć: $('img.logo').addClass("logoScroll"); ? Tylko nie wiem jak tego użyć?
Jeżeli coś opisałem niejasno, to proszę sugestię, wówczas rozwinę temat.