zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden shrink header on scroll

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.06.2022, 16:18
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard shrink header on scroll

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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.06.2022, 00:24
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

hier noch ein Link.

https://www.dyntec.de/referenzen

Der Shrink / Scroll - Effekt funktioniert einfach nicht.

Kann mir da einen Tipp geben?

Geändert von seeadler (09.06.2022 um 00:49 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.06.2022, 08:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.218
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von seeadler Beitrag anzeigen
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...
Mit Zitat antworten
  #4 (permalink)  
Alt 09.06.2022, 11:55
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

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!

Geändert von seeadler (09.06.2022 um 14:26 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 09.06.2022, 12:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.218
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 09.06.2022, 12:38
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 09.06.2022, 13:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.218
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 09.06.2022, 14:13
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 375
seeadler befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von seeadler (09.06.2022 um 14:27 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 09.06.2022, 14:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.218
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:11 Uhr.