javascript - 如何在滚动事件上设置背景色不透明度的动画？

我有两个要合并的代码，但是不确定实际的正确标记以及如何正确编写。

function EasyPeasyParallax() {
  scrollPos = $(document).scrollTop();
    $('#header_nav').css({
        'background-color': 'rgba(0, 0, 0, 0.8)'
      //'opacity': 0.5+(Math.min(scrollPos/100,1))
  });
};

$(function(){
  $('body').bind('mousewheel',EasyPeasyParallax);
});

当我向下滚动页面时，不透明度选择器起作用。但是，我只想定位div的背景色。如何将“background-color”选择器与scrollPos / 100代码结合使用？

最佳答案

您可以将此代码用于滚动事件上的animationg background-color的opacity属性。

jsFiddle Demo

function EasyPeasyParallax() {
    var scrollPos = $(document).scrollTop();
    var targetOpacity = 1;
    scrollPos < 1000 ? targetOpacity = '0.'+ (scrollPos*100)/10 : targetOpacity;
    $('span').css({
        'background-color': 'rgba(0, 0, 0, '+ targetOpacity +')'
    });
    console.log(scrollPos,targetOpacity);
};

$(function(){
    $(window).scroll(function() {
        EasyPeasyParallax();
    });
});

--

如果要使用jQuery动画background-color，请检查以下答案:

Special color transition effect with pure jQuery animation // no ui or other libary