Событие при попадании элемента в поле зрения + верхнюю часть экрана, при скроллинге страницы?

Здравствуйте
Имеется вот такой скрипт:

var target = $('.block');
	var targetPos = target.offset().top;
	var winHeight = $(window).height();
	var scrollToElem = targetPos - winHeight;

	$(window).scroll(function(){
	  var winScrollTop = $(this).scrollTop();
	  if(winScrollTop > scrollToElem){
		$(target).addClass("fixed");
	  } else {
		  $(target).removeClass("fixed");
	  }
	});


Скрипт добавляет к блоку .block класс .fixed как только блок попадает в поле зрения пользователя при прокрутке страницы.

Не могу решить проблему, как сделать чтобы класс добавлялся не тогда, когда элемент попадает в поле видимости, а тогда, когда между началом элемента и верхней части экрана остается например 30px?
  • Вопрос задан
  • 1060 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
@smartycms Автор вопроса
Вот есть вот такое решение, но почему-то не работает условие else
$(document).on('scroll', function() {
		$('.block').each(function() {
			var self = $(this), height;
			height = self.offset().top + windowHeight - 30;
			
			if ($(document).scrollTop() + windowHeight >= height) {
				$('.block').addClass("fixed");
			} else {
				$('.block').removeClass("fixed");
			}
		});
	});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы