jQuery fade background color of a header bar in when scrolled down

Question

I'm trying to fade the background of a header in to white but when I try using some jQuery to animate the fade of the background color, it just won't work.

jQuery

var windw = this;
$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(windw);

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.animate({'backgroundColor':'rgba(255,255,255,1)'},400);
            console.log($this.css('backgroundColor'));
            console.log(pos);
        } else if ($window.scrollTop() == 0) {
            $this.animate({'backgroundColor':'rgba(255,255,255,0)'});
            console.log($this.css('backgroundColor'));
            console.log(pos + ' at the top');
        } else {
            $this.animate({'backgroundColor':'rgba(255,255,255,0)'});
            console.log($this.css('backgroundColor'));
        }
    });
};

$('.home-header-main').followTo(86);

jsFiddle Demo

Help is appreciated

It looks like you really want to animate opacity, not background color? — Jeff, May 15 '13 at 15:13
It works if you include jQuery UI. If you do reference jQuerUI in your project, make sure you included the effects module. See http://jsfiddle.net/tJVQt/3/ — Yeronimo, May 15 '13 at 15:16

score 2 · Accepted Answer · edited May 23 '17 at 10:25

You can animate rgba using jQuery with the help of plugins, but I would let CSS3 handle all of this using CSS transitions.

Example:

body {
   background-color: rgba(255,255,255,1);
   -webkit-transition: background-color 0.4s linear; 
      -moz-transition: background-color 0.4s linear; 
        -o-transition: background-color 0.4s linear; 
           transition: background-color 0.4s linear; 
}

.bg-faded {
   background-color: rgba(255,255,255,0);
}

Then, you can use Javascript to toggle the class.

adeneo · Answer 2 · 2013-05-15T15:37:59.240

Just to animate the opacity of the background color, you don't really need a color animation plugin, you can use CSS transitions for newer browsers, but if you have to support browsers that don't support CSS3 you can use the step() method in jQuery's animate :

$.fn.followTo = function ( pos ) {
    return this.each(function() {

        var $this = $(this),
            $window = $(window),
            flag = true;

        $this[0].x = 1;

        $window.on('scroll', function(e){
            if ($window.scrollTop() > pos && flag) {
                flag = !flag
                anim($this, 0);
            }else if ($window.scrollTop() < pos && !flag){
                flag = !flag
                anim($this, 1);
            }

        });
    });

    function anim(elem, val) {
        elem.stop(true, false).animate({
          x : val
        },
        {
          step: function(now, fx) {
              $(fx.elem).css({backgroundColor : 'rgba(255,255,255,'+now+')'});
          },
          duration: 4000
        });
    }
};

$('.home-header-main').followTo(86);

FIDDLE

jQuery fade background color of a header bar in when scrolled down

2 Answers2