Добавление класса, когда пользователь прокручивает только от 200 до 300 пикселей

Question

Я пытаюсь добавить класс для div, когда пользователь прокручивает страницу вниз. Когда они прокручивают 200px вниз по странице, я хочу добавить класс, а затем, когда пользователь прокручивает вниз 300px, я хочу, чтобы класс был удален. Точно так же, когда пользователь прокручивает страницу назад и набирает 300px сверху, я хочу, чтобы класс был добавлен до тех пор, пока он не достигнет 200px, а затем удалил класс.

Я перепробовал так много вариантов, но думаю, что все неправильно. Вот jsfiddle того, как далеко я дошел до сих пор - http://jsfiddle.net/v8my3sr1/

$(window).on('scroll',function() { 
  var scroll = $(window).scrollTop();
  if (scroll >= 200) {
    $(".trigger").addClass("wow");
  } else {
    $(".trigger").removeClass("wow");
  }
});

Answer 1

Попробуйте что-то вроде этого:

$(window).scroll(function(){

  var cutoff = $(window).scrollTop();

   $(".trigger").each(function(){
    if($(this).offset().top + $(this).height() > cutoff){
      panel.removeClass('wow');
      $(this).addClass('wow');
      return false;
    }
  })
})

Answer 2

Ваше состояние неверно.Вы должны проверить, что значение scroll находится между 200 и 300

$(window).on('scroll',function() { 
  var scroll = $(window).scrollTop();
  if (300 >= scroll && scroll >= 200) {
    $(".trigger").addClass("wow");
  } else {
    $(".trigger").removeClass("wow");
  }
});

$(window).on('scroll',function() { 
  var scroll = $(window).scrollTop();
  if (300 >= scroll && scroll >= 200) {
    $(".trigger").addClass("wow");
  } else {
    $(".trigger").removeClass("wow");
  }
});

.container {
  height: 2000px;
}
.trigger {
  margin-top: 300px;
  height: 400px;
}
.wow {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="trigger">
    <h1>Trigger container</h1>
  </div>
</div>

Также вы можете использовать .toggleClass() для упрощения кода

$(window).on('scroll',function() { 
  var scroll = $(window).scrollTop();
  $(".trigger").toggleClass("wow", 300 >= scroll && scroll >= 200);
});