shrink header on scroll

seeadler · #1 (**permalink**) 08.06.2022, 15:18

Hi zusammen,

ich habe folgendes JS erstellt:

Code:

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

Meine Frage: Wie kombiniere ich "header" mit einer zusätzlichen css - Klasse?
Ich zu "header" in den Gänsefüßchen noch eine Klasse reinpacken und dann damit ansprechen.
Geht das?
Wenn ja, kann mir da jemand einen Tipp geben?

seeadler · #2 (**permalink**) 08.06.2022, 23:24

hier noch ein Link.

https://www.dyntec.de/referenzen

Der Shrink / Scroll - Effekt funktioniert einfach nicht.

Kann mir da einen Tipp geben?

cloned · #3 (**permalink**) 09.06.2022, 07:52

Zitat:

Zitat von seeadler

Meine Frage: Wie kombiniere ich "header" mit einer zusätzlichen css - Klasse?
Ich zu "header" in den Gänsefüßchen noch eine Klasse reinpacken und dann damit ansprechen.
Geht das?
Wenn ja, kann mir da jemand einen Tipp geben?

Du kannst hier jeden validen CSS Selektor verwenden: $('header.class1.class2') ist genauso möglich wie $('header') oder $('header.class1 div a') um ein a-element in einem div in einem header mit der Klasse class1 anzusprechen.

Mein Tipp ist also, genau das zu tun, was du gefragt hast.

Bei deinem Link ist $ für jQuery nicht definiert, das siehst du wenn du die Konsole öffnest. Ich müsste nachschauen, aber soweit ich weiß, passiert das, wenn man jquery mit noconflict verwendet, machst du das? Oder war das so, dass du das mit $ = jQuery.noconflict() initialisieren musst, falls es da zu Konflikten kommt? Habe das selber nie gebraucht, weiß nur, dass es da was gibt...

seeadler · #4 (**permalink**) 09.06.2022, 10:55

Code:

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

Ich habe "header" definiert. Leider funktioniert es immer noch nicht!

cloned · #5 (**permalink**) 09.06.2022, 11:07

Dein Header war auch vorhin schon definiert... Lies meinen Beitrag noch einmal, du hast das Problem das $ für jQuery nicht definiert ist. Also funktionieren alle Befehle mit $ am Beginn nicht. Das hat nichts mit deinem "header" zu tun.

Wirf einen Blick in die Entwicklerkonsole der Seite, das zeigt dir den Fehler.

seeadler · #6 (**permalink**) 09.06.2022, 11:38

Zitat:

Uncaught TypeError: $ is not a function
<anonymous> https://www.dyntec.de/referenzen/:459

....dann wird es wohl dieser Hinweis sein, oder?

Ich habs zugegeben aus codepen übernommen, wo es aber funktioniert

cloned · #7 (**permalink**) 09.06.2022, 12:43

Ich habe dir schon zweimal geschrieben wieso das hier steht. Wenn du offensichtlich meine Beiträge nicht liest, wieso sollte ich es dir dann noch ein drittes mal erklären?

seeadler · #8 (**permalink**) 09.06.2022, 13:13

.... aber dann versteh ich deine geschätzte Hilfe nicht. Kannst du mir evtl. den Code so verbessern, sodas es funktioniert?

Vielen lieben Dank schon jetzt dafür.

Code:

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

In function () ist nichts mehr definiert.

cloned · #9 (**permalink**) 09.06.2022, 13:42

Ok, noch ein drittes mal:

Zitat:

Bei deinem Link ist $ für jQuery nicht definiert

Du hast irgendwas in deinem Code, welcher dir das $ für jQuery überschreibt. Was genau, weiß ich nicht, vermutungen siehe meine erste Antwort.

Du musst dafür sorgen, dass du $ wieder verwenden kannst. Deine Funktion ist in Ordnung so wie sie ist, an der hat nie etwas nicht gepasst.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild zentrieren	JuKo	CSS	4	21.03.2018 00:35
Liste wird trotz float:left im li nicht horizontal	img	CSS	27	23.08.2013 12:43
Inline Listenelement wird nicht richtig im background befüllt	SteveB	CSS	3	28.04.2011 20:41
header verrutscht...	weblearner	CSS	6	03.12.2008 19:34
Darstellungsfehler - FF & IE7 vs. IE6	mk-gfx	CSS	2	29.10.2008 09:58