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

Franky Jo

2 года назад

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

//Прописываем 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");
	}
});

//Прописываем 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");
    }
  });

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

}

});

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