當不透明度動畫時Jquery滾動頁眉中斷

Question

我有一個頁眉，當用戶滾動瀏覽頁面上的第一部分時，我想淡入。我用不透明0，變爲不透明1，像這樣一個div：

$(window).scroll(function() { 
      // If the scroll position is past the 1st section... 
      if ($('body').scrollTop() > 500) { 

       $('#ribbon').css('opacity', 1); 

      } else { 

       $('#ribbon').css('opacity', 0); 
      } 
    }); 

這工作得很好，但是當我嘗試使用任何fadeIn()或animate()動畫的透明度，它停止工作，並在div不會褪色。

Answer 1

LIVE DEMO

$(window).scroll(function() { 

    var opacity = $(this).scrollTop() > 500 ? 1 : 0 ; 
    $('#ribbon').stop().fadeTo(800, opacity);  

});