Как добавить эффект fadeIn для фиксированного div на позицию прокрутки

Question

Мне нужен эффект fadeIn, когда появляется фиксированный div. Я дал время прокрутки, чтобы зафиксировать верхний div.Its работает, но мне нужен более гладкий результат, как fadeIn. Ниже добавлен мой сценарий и jsfiddle ссылку

$(window).scroll(function(){ 
var sticky = $('.sticky'), 
scroll = $(window).scrollTop(); 
if (scroll >= 150) sticky.addClass('fixed'); 
else sticky.removeClass('fixed'); 
}); 

https://jsfiddle.net/ansarmon/0mnvmf3d/4/

Answer 1

Вы можете использовать CSS анимации ключевые кадры, как это, см fiddle

.fixed{ 
    animation: appear linear 2s; 
    animation-iteration-count: 1; 
    animation-fill-mode:forwards; 
} 

@keyframes appear{ 
    0% { 
    opacity:0; 
    } 
    100% { 
    opacity:1; 
    } 
}