Как сделать появление блока в пределах какой то высоты?

[dmitry]

Я поигрался с кодом. И проще не следовать моему примеру кода, а описать все поведение на css анимациях:

Анимация описывается двумя классами .hide и .show. Каждая анимация при использовании - линейная. т.е. конечное состояние анимации - это последний фрейм анимации (слово forwards). В него я и кодирую значение скрытости блока (в чем я думал будет проблема).

body{
  height: 1400px;
}

.block {
  animation: show 1s forwards;
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  font-size: 50px;
  color: #000;
}

@keyframes show {
    0%   { opacity:0; }
    100% { display: block; opacity:1; }
}

@keyframes hide {
    0%   { display: block; opacity:1; }
    100% { display: none; opacity:0; }
}

.block.hide {
  animation: hide 1s forwards;
}

block.show {
  animation: show 1s forwards;
}

В js добавляем-удаляем эти классы.

var bl = $('.block')
window.addEventListener('scroll', function() {
	var st = document.documentElement.scrollTop
  // alert(bl)
	if (st > 300 && st < 800) {
		bl.removeClass('hide')
    bl.addClass('show')
	} else {
		bl.addClass('hide')
    bl.removeClass('show')
	}
})

GPwBQL