[FRAGE] Hilfe zu scrollTop

[tobsenks]

Hey Leute,

ich habe folgenden Code:

$(window).scroll(function () {
	if ($(this).scrollTop() > 335) {
		$('#logo-black').css( "display", "block");
		$('#logo-white').css( "display", "none");
		$('.top-navigation_a').css( "color", "#a2a2a2");

	} else {
		$('#logo-black').css( "display", "none");
		$('#logo-white').css( "display", "block");
		$('.top-navigation_a').css( "color", "#ffffff");
	}
});

Ich möchte jetzt aber das das Bild wechselt sobald 10% der Seite erreicht sind und nicht 335 pixel.. Hat jemand eine Idee wie man das umsetzten könnte?

Gruß
Tobias

 

[j-l-n]

var body, html, height, percentage, showAtPosition;
body = document.body;
html = document.documentElement;
height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
percentage = 10; //bei 10% der Höhe einblenden
showAtPosition = height * (percentage * 0.01);


$(window).scroll(function () {
	if ($(this).scrollTop() > showAtPosition) {
		$('#logo-black').css( "display", "block");
		$('#logo-white').css( "display", "none");
		$('.top-navigation_a').css( "color", "#a2a2a2");

	} else {
		$('#logo-black').css( "display", "none");
		$('#logo-white').css( "display", "block");
		$('.top-navigation_a').css( "color", "#ffffff");
	}
});

 

[tobsenks]

Hey,

leider funktioniert es nicht.. Bekomme von Firebug folgende Fehlermeldung: TypeError: body is null... Kannst du mir da vllt noch helfen?..

Gruß
Tobias

 

[mikdoe]

body würde ich nicht als Variablennamen benutzen, das ist wahrscheinlich ein reserviertes Wort.

 

[tobsenks]

Auch wenn ich body durch nen anderen Variablennnahmen austausche bekomme ich die Fehlermeldung: TypeError: cnt is null

 

[rico2009]

Wann wird das Script denn ausgeführt? - Eventuell wird es nämlich zu früh ausgeführt und du hast zu diesem Zeitpunkt noch keinen fertigen DOM-Baum.

cnt ist der neue Namen vom ehemaligen body, korrekt?

 

[Mephiztopheles]

Um die Komplette scrollbare Größe festzustellen gibt es jQuery(el)[0].scrollHeight

Dazu musst du jetzt um das mit scrollTop vergleichen zu können die Höhe abziehen

also sähe das ganze ca so aus:

$(window).scroll(function () {
	if ($(this).scrollTop() *100 / this.scrollHeight - this.innerHeight < 10) {
		[...]

	} else {
		[...]
	}
});