Logowechsel nach dem scrollen

musicgabser

Hallo zusammen,
ich bin gerade dabei ein neues Theme zu erstellen, als Ausgangspunkt benutze ich FoundationPress. Ich würde gerne das Logo in der Top Bar nach etwas scrollen austauschen. Ich bin leider nicht so fit in Sachen JavaScript und bitte daher an dieser Stelle in dieser Form um Hilfe.
Hier ist meine Lösung: http://jsfiddle.net/9tdrpfb9/ funktioniert soweit auch genau so wie gewünscht, allerdings möchte ich auf der Seite später den Revolution-Slider einsetzen und der scheint mir einen Strich durch die Rechnung zu machen: http://52.11.22.104/ Zum einen funktioniert der der Bildaustausch nicht mehr und zum anderen überdeckt der Slider das Logo welches eigentlich über der Top Bar rausragen sollte (siehe jsfiddle-Link weiter oben).
Bin um jeden Tipp dankbar!!
Gruß
Gabriel

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

musicgabser

Hola,
hat denn da wirklich keiner eine Idee?
Grüezi
Gabriel

SirEctor

Anstatt mit $ im Javascript zu arbeiten, muss man bei WordPress mit jQuery arbeiten. Tausche also das $ gegen jQuery aus, oder mach es in jQuery verfügbar:
http://stackoverflow.com/questions/1115…pt-to-wordpress

Zitat von musicgabser

zum anderen überdeckt der Slider das Logo welches eigentlich über der Top Bar rausragen sollte (siehe jsfiddle-Link weiter oben).

Schreib in deine CSS

Code

.off-canvas-wrap {
overflow: visible;
z-index: 20;
}

musicgabser

Hi SirEctor,
super, tausend Dank schon mal Dein css-code funzt, musste aber den z-index hochstellen weil der Revolution-Slider seinen auf 23 oder so hat...
Das mit dem jQuery hat leider nicht geklappt, da kommt jetzt die Meldung jQuery is not defined.... Ich meine FoundationPress, der Revolution-Slider und WordPress laden bzw. benötigen doch schon die jQuery Bibliothek oder stehe ich aufm Schlauch und verstehe das völlig falsch?
Gruß und Danke noch mal
Gabriel

SirEctor

Code

jQuery(window).scroll(function() { if ($(this).scrollTop() > 200){ $('header').addClass("logochange")  }
else {
   $('header').removeClass("logochange");
}
});

nicht nur das erste $ ersetzen, sondern alle. Also so:

Code

jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > 200){ jQuery('header').addClass("logochange")  }
else {
   jQuery('header').removeClass("logochange");
}
});

Ist ungetestet.

musicgabser

Hm, klappt leider auch nicht, selbes Ergebnis....
Lade ich die Datei vielleicht an falscher Stelle?

SirEctor

Versuch es mal so:

Code

//<=!=[=C=D=A=T=A=[
jQuery(document).ready(function() {
  jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > 200){
      jQuery('header').addClass('logochange');
    } else {
      jQuery('header').removeClass('logochange');
    }
  });
});
// ]=]=>

Alles anzeigen

Zur Not erst mal per <script> in den Footer schreiben.

musicgabser

Yes, läuft! Tausend Dank!!!!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Logowechsel nach dem scrollen

Jetzt mitmachen!