Как начать показ блока при скролле?

Question

[Lenwoot]

<script type="text/javascript">
 $(document).ready(function() {
 $("#slide01").css("display", "none");
 $("#slide01").fadeIn(2000);
 });
</script>

Есть блок, его анимация начинается независимо, где он находится. т.е пока долистал до него, анимация уже прошла. Как начать показ анимации (и показ самого блока) только тогда, когда до него дойдет скроллинг?

Answer 1

[Александр Цымбал]

$("#slide01").css("display", "none");
$(window).scroll(function(){
   if ($("body").scrollTop() > 0) { //если страница прокручена
     $("#slide01").fadeIn(2000); //выводим блок
   } else {//иначе
     $("#slide01").fadeOut(2000); //прячем блок
   }
});

Comments

[Lenwoot]

vk.cc/3wpQja вставил на изображения, распределил их по списку: #slide01 #slide1 #slide2 и #slide3. Нормально работает только первое изображение (в блоке "кто мы")

[Александр Цымбал]

powepmakerru: ааа, так у вас задача другая. вам нужно показывать элемент при прокрутке до этого блока (т.е. когда блок попадает в область видимости). Тогда вам нужен немного другой вариант.
Рассчитайте отступы сверху для каждого из блоков (для каждой <section>) и проверяйте. Если достигнута определенная высота скролла страница ($("body").scrollTop() > ...), то включайте соответствующий блок.

Answer 2

[zuraavl]

Можно использовать связку WOW.js и animate.css.

Answer 3

[Igor]

Waypoints поможет