Как при прокрутке половины экрана добавить класс?

Question

[kamisarlapsha]

Привет, нужно при прокрутке половины экрана добавить класс к элементу.

Решил использовать такой код:

$(document).ready(function(){
	$("#fixed-top").hide();
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$("#fixed-top").addClass("класс,который нужно добавить");
			} else {
				$('#fixed-top').removeClass("класс,который нужно добавить");
			}
		});
	});
});

Но как именно указать эту половину. Допустим как в css можно написать 50vh например. А как поступить тут, ведь нужно чтобы и на телефоне и на пк, как только прокрутили на половину экрана, добавился класс.

Comments

[kamisarlapsha]

Может подсчитать его ?

Например так:
50 * window.innerHeight/100

Answer 1

[Анатолий]

$(window).height() / 2

$(window).height() - получение высоты окна браузера.
Половина экрана = половина высоты окна браузера.

Comments

[kamisarlapsha]

var height = $(window).height() / 2;
    
$(document).ready(function(){
    
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > height) {
				$("img-bg").addClass("opacity");
			} else {
				$('img-bg').removeClass("opacity");
			}
		});
	});
})

[kamisarlapsha]

Но почему то работать не хочет

[Анатолий]

kamisarlapsha, класс указывается с точкой: .img-bg