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

Question

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

Здравствуйте.
Необходимо, чтобы при прокрутке страницы к блоку с определенным id, к body добавлялся класс. А при прокрутке выше класс удалялся.
Как это можно реализовать с помощью jQuery?

Answer 1

[Виталий Инчин ☢]

document.onscroll = function(){
  var what = document.querySelector("#id").getBoundingClientRect().top;
  document.body.classList.toggle(
    "class", what <= window.innerHeight
   );
}

jsfiddle.net/eoeyuo30/1

Или на jq:

$(document).scroll(function(){
  var what = $("#id").offset().top, 
        pos = $(window).height() + $(window).scrollTop()
  $("body").toggleClass("class", what <= pos);
});

jsfiddle.net/eoeyuo30/2

Comments

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

А можно в последнем примере сделать так, чтобы изменения происходили при касании блока верхнего края окна, а не при появлении снизу?

[Виталий Инчин ☢]

Владимир Новицкий: оставте только $(window).scrollTop(), без $(window).height().

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

Виталий Инчин ☢: Да, прекрасно. Спасибо.
Если позволите, еще тогда маленький нюансик. Можно как-то указать отступ сверху? То есть, чтобы класс добавлялся, когда блок еще не доехал до верха пикселей 10, например.

[Виталий Инчин ☢]

Владимир Новицкий: $(window).scrollTop() + отступ

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

Виталий Инчин ☢: Вообще супер. Спасибо большое.

Answer 2

[Andrew]

Примерно так

$(window).on('scroll', function(){
    if($(window).scrollTop() >= $('.element').offset().top){
      $('body').addClass('new-class');
    }
  });

Comments

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

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

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

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

[Andrew]

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

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

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

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

[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

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

[Andrew]

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

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

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

[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");
	}
  });

[Andrew]

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

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

ОК. Спасибо.