Как определить высоту браузера по body и html?

Question

[Igor Lanko]

Добрый день!

Запилил на сайт смену цвета фона при определенном проценте скролла по высоте. Код:

function scrollfunction() {
			var body = document.body;
			if(body.scrollTop / body.scrollHeight < 0.07) {
				body.className = "white";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.20) {
				body.className = "red";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.30) {
				body.className = "violet";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.45) {
				body.className = "blue";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.60) {
				body.className = "green";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.75) {
				body.className = "orange";
			} else {
			if(body.scrollTop / body.scrollHeight < 0.96) {
				body.className = "asphalt";
			} }}}}}}
		}

Проблема:
Смена цвета работает только в Chrome и Safari. Гуглингом обнаружил, что эти браузеры высчитывают высоту окна по тегу body, остальные по html. Постарался сделать аналогично с html, добавляя такие же условия для html, но это не помогло. С условиями для body и html сразу — не работает. Более того, с условием только для html — тоже не работает.

Сам веб-дизайнер и верстальщик, в js разбираюсь плохо, но кое-как написал.
В чем ошибка? Буду очень благодарен!

Answer 1

[Igor Deyashkin]

Тут написано. Добавить особо то и нечего =)

И я бы немного изменил код:
1. Не стоит высчитывать долю в каждой проверке, лучше сохранить ее в переменной и ею уже оперировать.
2. Будет более читабельно, если использовать else if

/**
 * Определяет позицию скролла по отношению к высоте полоски скролла.
 * @return {Number} 
 */
function getScrollPosition() {
	var scrollHeight = document.documentElement.scrollHeight;
	var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

	return Math.round(scrollTop/scrollHeight);
};

function scrollfunction() {
	var body = document.body;
	var scrollPosition = getScrollPosition();

	if (scrollPosition < 0.07) {
		body.className = "white";
	} else if (scrollPosition < 0.20) {
		body.className = "red";
	} else if (scrollPosition < 0.30) {
		body.className = "violet";
	} else if (scrollPosition < 0.45) {
		body.className = "blue";
	} else if (scrollPosition < 0.60) {
		body.className = "green";
	} else if (scrollPosition < 0.75) {
		body.className = "orange";
	} else if (scrollPosition < 0.96) {
		body.className = "asphalt";
	};
};

Answer 2

[Sayonji]

По крайней мере в Firefox есть свойста window.scrollY и window.scrollMaxY.