JQuery Scroll Animate Color

Question

I have a fixed position header on my website that has an alpha transparency when its at the top of the page. When the user scrolls past the top of the page, it animates to a solid color. However, when the user scrolls back to the top of the page I want the color to go back to alpha transparency. Unfortunately from what I've read JQuery color animations don't support RGBA values. I have the color changing when the user scrolls down, however I can't get it to change to a color when its back at the top of the page.

<script type="text/javascript">
    $(window).scroll(function() {
        $("#header").css("position", "fixed");
        if ($(window).scrollTop() > 0) {
            $("header").animate({backgroundColor:'#2b2b2b'}, 'slow');
        }
        if ($(window).scrollTop() <= 0) {
            $("header").animate({backgroundColor: '#000000'}, 'slow');
        }
    });
</script>

Any ideas on how to do this?

Yes I have an HTML5 header tagged wrapped inside a div with an id of #header it's confusing. — bdjett, Mar 06 '13 at 22:02
Actually, jQuery's animations don't support animating background-color (see my comments to roXor's answer). You need an additional library to animate background color. — Shauna, Mar 06 '13 at 22:53

Roko C. Buljan · Answer 1 · 2013-03-06T22:38:14.703

1

Use CSS3 transition with jQuery:

You can append a CSS3 transition to header into a custom class where you can set the desired color.
Than with jQuery you just add/remove that class:

LIVE DEMO

$(window).scroll(function() {
    var addRemClass = $(window).scrollTop() > 0 ? 'addClass' : 'removeClass';
    $("header")[addRemClass]('bgChange');
});

CSS:

header{
  background:#000;
  padding:20px;
  color:#fff;
  width:100%;
  transition:0.8s;   /* Our nice transition (you can also use 'ms' values) */
}

header.bgChange{
  background:#2b2b2b;/* I used #f00 in the demo to make it more obvious :) */
}

Solution that uses jQuery UI: To support more browsers do like :

LIVE DEMO

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>
    $(window).scroll(function() {
        $("header").stop().animate({
          backgroundColor: $(window).scrollTop() > 0 ? '#2b2b2b' : '#000'
        }, 800);
    });
</script>

edited Mar 06 '13 at 22:38

answered Mar 06 '13 at 21:55

Roko C. Buljan

196,159
39
305
313

I can't use fadeTo() because I don't want the text on the header to be faded. – bdjett Mar 06 '13 at 22:06
Note - jQuery doesn't support animating the background color by default. You need an extra library (either jUI or the Color plugin) to do it with only jQuery (and without CSS3, which has a few holes in support), in case you wanted to go that route. http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor – Shauna Mar 06 '13 at 22:16
@Shauna CSS3 "support" is counting days. – Roko C. Buljan Mar 06 '13 at 22:16
@roXon - For sure, but some people are still stuck supporting archaic browsers that do not and never will have such support, and therefore may seek out a JavaScript-only route, or otherwise complain when the CSS3 route doesn't work in said browsers. The reason the OP's code doesn't work is due to lack of support for animating background-color. It's often a good idea to explain why. – Shauna Mar 06 '13 at 22:23
@Shauna While agreeing on your words, I'm always trying to share the point of view that a user with IE7 (for example) is not here to see fade anything (specially something from `#000` to `#222`) but for page-content. Hope you get that point of view. – Roko C. Buljan Mar 06 '13 at 22:27
@roXon - Oh, I definitely agree, but unfortunately, I don't always have clients that do, there's not always anything I can do about said clients, and I'm not alone in these types of situations. =/ Also, IE8 doesn't support it, either, and it's around as long as WinXP and Win Server 2003 are around. – Shauna Mar 06 '13 at 22:29
@Shauna ok, I give up ;) added the jQuery UI example – Roko C. Buljan Mar 06 '13 at 22:38

JQuery Scroll Animate Color

1 Answers1