Появление блока при прокрутке страницы. Дёргается анимация

На сайте при прокрутке страницы появляется блок. Блок фиксированный, для него применяется анимация. Пока страница прокручивается, то анимация дёргается и не останавливается. При остановке прокрутки блок появляется и анимация останавливается, как и должно быть. Можно ли решить проблему, чтобы анимация останавливалась сразу после выполнения? Без анимации всё работает нормально.

HTML:

<div id="fixed"></div>

CSS:

#fixed {

width: 300;

height: 50px;

background: #dadada;

opacity: 0;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

-o-transition: all 0.3s ease;

-ms-transition: all 0.3s ease;

transition: all 0.3s ease;

position: fixed;

top: 40px;

left: 50px;

}



#fixed.show

{

opacity: 1;

top: 50px;

}

JS:

$(window).on('load scroll',function(){ 

    if ($(this).scrollTop() >= '150') {

        $('#fixed').addClass("show");

    }

    else  {$('#fixed').removeClass("show");}

});