Почему прокрутка исчезает при использовании jQuery и CSS3 преобразования с ошибками?

Question

У меня есть прокрутка / постепенное добавление, работающая с CSS / jQuery, но она глючная. Как сделать переход более плавным?

Вот код, который я использую (CSS)

@keyframes fadeIn {
  0% {
   opacity: 0; 
   transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
   }
}

А вот jQuery:

$(document).ready(function(){
    $(document).scroll(function(){
    if($(document).scrollTop() > 700 && ($(document).scrollTop() < 780 )){
      $("div").addClass('div_a');
    }
});

});

(сбой в том, что полоса прокрутки немного увеличивается при прокрутке вниз, а содержимое немного спускается при исчезновении div).

Надеюсь, это понятно для понимания ...

Любые идеикак это исправить?