Question

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

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代码组合？

Answer 1

您可以在滚动事件中将此代码用于animationg background-color＆＃39; 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

Answer 2

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

如何在滚动事件上为背景颜色不透明度设置动画？

2 个答案: