Как можно обрабатывать события при скролле?

Question

[RusTorg]

Имеем:

<!-- ... -->
      <p>...</p>
      <p>...</p>
      <p>...</p>
      <p class="show-me-on-scroll"></p>
      <p>...</p>
      <p>...</p>
      <p>...</p>
<!-- ... -->

Требуется: при пролистывании до элемента с классом "show-me-on-scroll", задать ему класс "visible". При пролистывании обратно убрать этот класс.

Answer 1

[Денис Инешин]

Для этой задачи существует отличный плагин: imakewebthings.com/waypoints

Answer 2

[Sergeniy]

Не менее отличный scrollrevealjs.org, просто пишешь как нужно появляться:

<div data-sr="enter left, hustle 20px"> Foo </div>
<div data-sr="wait 2.5s, ease-in-out 100px"> Bar </div>
<div data-sr="move 16px scale up 20%, over 2s"> Baz </div>
<div data-sr="enter bottom, roll 45deg, over 2s"> Bun </div>