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

Question

[Сергей вопросов]

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

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?

Answer 1

[one_day]

https://codepen.io/one_day/pen/XeExVB

Comments

[Сергей вопросов]

Да все-бы хорошо, но вот только важно задать addclass именно тогда, когда между элементом и верхней частью экрана остается 30px.

Сейчас сделал так:

var windowHeight = $(window).height();
 
	$(document).on('scroll', function() {
		$('.block').each(function() {
			var self = $(this), height;
			var top = $(document).scrollTop();
			height = self.offset().top + windowHeight - 30;
			
			if (top + windowHeight > height) {
				$('.block').addClass("fixed");
			} else {
				$('.block').removeClass("fixed");
			}
			
		});
	});

Но это решение начинает сильно лагать (моргать при прокрутке страницы) при добавлении к блоку position fixed;

[one_day]

smartycms, var scrollToElem = targetPos - 30;
https://codepen.io/one_day/pen/XeExVB

[Сергей вопросов]

one_day, Спасибо вам большое! Очень помогли!

Answer 2

[Сергей вопросов]

Вот есть вот такое решение, но почему-то не работает условие 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");
			}
		});
	});