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

Вопрос-ответ JavaScript
1

У меня возникла проблема. Как сделать, чтобы блок появлялся, только в определенных пределах страницы? Например от 1000-1400пх он появлялся, а во всех других случаях исчезал.

2

Только через js. Реальный код будет несколько сложнее (например чтобы учесть случай когда страница загрузилась с уже проскроленными контентом). Вот пример http://jsfiddle.net/0xp9g1fo/ как реагировать на скролл. Я верно понял проблему?

3

По идее нужно дописать
if (st < 600) {
f.classList.add(‘show’);
else{
f.classList.remove(‘show’);
}
Тогда получится ширина в 300px в которой блок будет показываться. Я правильно размышляю?

4

будет достаточно изменить условие так чтобы определить вернхнюю и нижнюю границу в которых блок будет появляться

if (st > 300 && st < 600) {
	f.classList.add('show')
} else {
	f.classList.remove('show')
}
5

ок спасибо)

6

Возникла проблема, как это перевести на jQuery?

7

единственный момент, который может быть неочевиден - это как получить scrollTop у элемента с помощью jQuery. Остальное - навешивание обработчиков, добавление-удаление классов или гуглиться или тривиально.

8

ок, как туда плавность добавить?

9

плавность чего? Появления блока?

10

Да. Плавное появление и сокрытия блока. Как это реализовать?

11

Есть дешевые варианты - через добавление классов и анимации прозрачности с помощью css transition. Там будет проблема координации по скрытию/отображению блока в конце анимации.

Есть вариант - жонглировать jq анимациями и свойствами. Нечто вроде кода ниже. Менее оптимальный с точки зрения производительности, но координировать такой код проще.

// Hide
$block
	.stop()
	.animate({
		opacity: 0
	}).then(function() {
		$block.css({
			display: 'none'
		})
	})

// Show
$block
	.stop() // остановит текущую анимацию если эта началась в ее середине
	.css({
		display: 'block',
		opacity: 0
	})
	.animate({
		opacity: 1
	})
12


В чем проблема?

13

Если склеить 2 моих примера, то код не заработает. Они демонстрируют принципы о которых я пишу, но не являются готовым решением. Я не раздаю готовых решений.

Для начала на странице нет даже jQuery. Поэтому при первом же обращении к $ падает ошибка.

16 
var bl = $('.block')
window.addEventListener('scroll', function () {
	var st = document.documentElement.scrollTop
if (st > 300 && st < 800) {
  //show
    $(".block")
	.stop() 
	.css({
		display: 'block',
		opacity: 0
	})
	.animate({
		opacity: 1
	})
} else {
	// Hide
$(".block")
	.stop()
	.animate({
		opacity: 0
	}).then(function() {
		$block.css({
			display: 'none'
		})
	})
}
})

Как мне убрать моргание

17

Я поигрался с кодом. И проще не следовать моему примеру кода, а описать все поведение на 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')
	}
})