如何在滚动位置上为固定div添加fadeIn效果

Question

当出现固定的div时，我需要一个fadeIn效果。我给了滚动时间来修复顶部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;
    }
}