Support » Allgemeine Fragen » Shrinking Header funktioniert nicht

  • monacofranze

    (@monacofranze)


    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 von monacofranze.
    • Dieses Thema wurde geändert vor 2 Jahren von monacofranze.
    • Dieses Thema wurde geändert vor 2 Jahren 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)

    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)

    $(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.