Как сделать .scrollTop() в процентах?

Question

[Владимир Новицкий]

Здравствуйте.
Возможно ли привязать .scrollTop() к процентам (лучше к vh), а не к пикселям?

Для примера код:

$(document).ready(function() {
	var $header = $("#header");

	$(window).scroll(function() {
		if ($(this).scrollTop() > 700 && $header.hasClass("transparent")) {
			$header.removeClass("transparent").addClass("opacity");
		} else if ($(this).scrollTop() <= 700 && $header.hasClass("opacity")) {
			$header.removeClass("opacity").addClass("transparent");
		}
	}); //scroll
});

С помощью него добавляются или удаляются классы в зависимости от прокрутки. В данном случае, для изменения надо прокрутить на 700px. Мне необходимо, чтобы замер происходил в процентах (или vh). То есть, например, если я прокрутил 80% окна (или вьюпорта), то класс меняется.

Answer 1

[kapuletti]

Высоту документа ( $(document).height() ) делим на 100, умножаем на нужный % прокрутки.

Comments

[Владимир Новицкий]

Спасибо. Просто я не специалист... Применительно к вышеприведенному скрипту, как это должно выглядеть?

[kapuletti]

Если не ошибаюсь :)

$(window).scroll(function() {
var documentHeight = $(document).height();
var percent = 80;

if ($(this).scrollTop() > (documentHeight/100*percent) && $header.hasClass("transparent")) {

ну и в следующем if по аналогии.

[Владимир Новицкий]

kapuletti: К сожалению, в таком виде не работает:

$(document).ready(function() {
	var $header = $("#page-header");

	$(window).scroll(function() {
		var documentHeight = $(document).height();
		var percent = 82;
		if ($(this).scrollTop() > (documentHeight/100*percent) && $header.hasClass("transparent")) {
			$header.removeClass("transparent").addClass("opacity");
		} else if ($(this).scrollTop() <= (documentHeight/100*percent) && $header.hasClass("opacity")) {
			$header.removeClass("opacity").addClass("transparent");
		}
	}); //scroll
});

[kapuletti]

Владимир Новицкий: научитесь пользоваться консолью jsfiddle.net/kqw5ctvc/11

[Владимир Новицкий]

kapuletti: Да, пример работает. Но не совсем так. Сейчас просчитывается высота всего документа, а я имел в виду высоту видимой части окна (проще говоря, вьюпорт).

[kapuletti]

Владимир Новицкий: jsfiddle.net/kqw5ctvc/14

[Владимир Новицкий]

kapuletti: Да точно. Спасибо! А я думал, как через .innerHeight() надо делать...