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

В данной статье, я хочу поделиться с вами кодом, который при прокрутке экрана будет добавлять класс блоку/элементу, который будет появляться на экране. При помощи этого метода, вы можете сделать чтобы при появлении блока или элемента, происходила анимация или они появлялись так, как вы задумали.

//Прописываем id блока, 
var target = $('#block_1');
var winHeight = $(window).height();
var heihgtTopToElement = $("#block_1").offset().top - $(window).scrollTop();
 
				   
$(window).scroll(function() {
	var windowpos = $(window).scrollTop();
//Проверка, если проскролили больше, чем высота от начала сайта до элемента
//добавляется класс active_nav
	if ( windowpos => heihgtTopToElement ) {
		$("$block_1").addClass("active_nav");
	} else {
		$("$block_1").removeClass("active_nav");
	}
});

Еще один скрипт, который добавляет класс элементу

  var a = $("#block_2");
  var posa = a.position();
  $(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos + 70 >= a.offset().top && windowpos <= a.offset().top + a.height()-70) {
      $("a[href=#block_2]").addClass("active_nav");
    } else {
      $("a[href=#block_2]").removeClass("active_nav");
    }
  });

Если у вас будут вопросы в работе скрипта, пишите, обязательно отвечу.

Оставьте ответ

comment-avatar

*