Как поменять класс у body при прокрутке к определенному элементу?

Странно. Код работает, но почему-то не так, как надо. Пример: novi.co/test/page
Там при прокрутке к белому фону (т. е. к основному контенту статьи) иконка-гамбургер должна окрашиваться в черный цвет. Вместо этого происходит вызов меню, хотя оно должно вызываться только при нажатии.

Эффект должен быть, как здесь: novi.co/test/page2
Но здесь идет привязка к процентам от прокрутки страницы, а нужна привязка к определенному блоку.

Владимир Новицкий: при появлении класса в body начинает выполнятся вот эта конструкция в css:

.nav-active .nav-icon {
right:19rem;
width:calc(100% - 19rem);
height:calc(100vh - 2rem);
}
.nav-icon > span {
position:absolute;
display:block; и т.д.

Andrew: Но ведь во втором примере все нормально работает.

Владимир Новицкий: Во втором примере на body класс не вешается

Там такой скрипт:

$(window).scroll(function() {
	var $header = $("#page-header");
	var windowHeight = $(window).height();
	var percent = 77;
	if ($(window).scrollTop() > (windowHeight / 100 * percent) && $header.hasClass("transparent")) {
		$header.removeClass("transparent").addClass("opacity");
	} else if ($(window).scrollTop() <= (windowHeight / 100 * percent) && $header.hasClass("opacity")) {
		$header.removeClass("opacity").addClass("transparent");
	}
}); //scroll

Но он под проценты заточен.

Владимир Новицкий: При клике по иконке, body получает класс .nav-active и происходит анимация; При скролле он получает тот же класс и, соответственно, применяется тот же эффект что и при клике.

Andrew: А, точно. А можно, как-то сделать первый вариант на основе второго примера?

Классы разные фигачить на разные события... т.е. при скролле давать условно класс .nav-active2, где указан только цвет иконки.

Andrew: А если без body обойтись? Просто второй пример изменить так, чтобы реагировал (менял transparent на opacity) не в зависимости от процентов прокрутки, а при достижении определенного блока.

Andrew: Вроде сделал, работает.
Но не ручаюсь за правильность и оптимальность. Может можно, как то уменьшить код:

$(window).on('scroll', function(){
    if($(window).scrollTop() >= $('.article-content').offset().top){
      $('#page-header').removeClass("transparent").addClass("opacity");
    } else if ($(window).scrollTop() <= $('.article-content').offset().top){
		$('#page-header').removeClass("opacity").addClass("transparent");
	}
  });

Владимир Новицкий: Все нормально с кодом.

ОК. Спасибо.