Shrinking Header funktioniert nicht

  • monacofranze

    (@monacofranze)


    vor 2 Jahren, 10 Monaten

    Hi zusammen,

    ich hoffe von euch jemand kann mir weiterhelfen. Mein Shrinking Header funktioniert nicht.
    Hier mal der Link zur Seite: https://www.dyntec.de/referenzen/

    Mein Code:

    header {
	position: fixed;
	width: 100%;
	background: transparent;
	top: 80px;
	left: 0;
	right: 0;
	z-index: 9999;
	transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
}
.shrink {
	background: red;
	/*background: #041927;*/
}

    Java-Script:

    

$(document).on("scroll", function(){
		if
      ($(document).scrollTop() > 150){
		  $("header").addClass("shrink");
		}
		else
		{
			$("header").removeClass("shrink");
		}
	});

    Kann mir da jemand weiterhelfen?

    • Dieses Thema wurde geändert vor 2 Jahren, 10 Monaten von monacofranze.
    • Dieses Thema wurde geändert vor 2 Jahren, 10 Monaten von monacofranze.
    • Dieses Thema wurde geändert vor 2 Jahren, 10 Monaten von Hans-Gerd Gerhards. Grund: Formatierung als Code korrigiert

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 2 Jahren, 10 Monaten

    Hallo,
    Fragen zur Programmierung solltest du eher auf https://wordpress.stackexchange.com/ stellen. Wir klären hier im Forum in erster Linie Fragen zur Anwendung von WordPress.
    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 2 Jahren, 10 Monaten

    $(document).on("scroll", function(){ …

    WordPress verwendet jQuery im No-Conflict-Mode. Das bedeutet, dass du nicht einfach nur das $-Zeichen als Abkürzung für jQuery verwenden kannst und in der Konsole des Browsers „Uncaught TypeError: $ is not a function“ ausgegeben wird.

    Wenn du deine Funktion in 

    jQuery(document).ready(function($) {
// dein jQuery-Code hier
});

    packst, sollte es gehen.

Ansicht von 2 Antworten – 1 bis 2 (von insgesamt 2)
  • Das Thema „Shrinking Header funktioniert nicht“ ist für neue Antworten geschlossen.