javascript - 动画不透明度时，Jquery Scrolling Header 会中断

Question

我有一个标题，当用户滚动到页面上的第一部分时，我想淡入。我使用不透明度为 0 的 div 更改为不透明度 1，如下所示：

$(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()or为不透明度设置动画时animate()，它会停止工作并且不会在 div 中淡入淡出。

Answer 1

LIVE DEMO

$(window).scroll(function () {

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

});