添加淡入到onscroll事件

Question

我使用這個JavaScript的小搜索圖標在頂部導航中間here onscroll：

<script type="text/javascript"> 
$(document).scroll(function() { 
    var value = $(this).scrollTop(); 
    if (value > 120) 
     $("#topSearchIcon").css("display", "block"); 
    else 
     $("#topSearchIcon").css("display", "none"); 
}); 

</script> 

我需要添加淡入一個平滑的過渡，我不確定如果有人能夠提供任何建議，如何最好地融入它？謝謝。

更新代碼：

<script type="text/javascript"> 
$(document).scroll(function() { 
    var value = $(this).scrollTop(); 
    if (value > 120) 
     $("#topSearchIcon").fadeIn() 
     $("#topSearchIcon").css("display", "block"); 
    else 
     $("#topSearchIcon").css("display", "none"); 
}); 

</script> 

Answer 1

試試這個

if (value > 120) 
     $("#topSearchIcon").fadeIn(); 

你要刪除的行：

$("#topSearchIcon").css("display", "block"); 

你可以看到它在行動here