JQuery Scroll Animate Color

Question

У меня есть заголовок фиксированной позиции на моем веб-сайте, который имеет альфа-прозрачность, когда он находится в верхней части страницы. Когда пользователь прокручивает верхнюю часть страницы, он оживляет сплошной цвет. Однако, когда пользователь прокручивается назад к верхней части страницы, я хочу, чтобы цвет возвращался к альфа-прозрачности. К сожалению, из того, что я читал, цветные анимации JQuery не поддерживают значения RGBA. У меня меняется цвет, когда пользователь прокручивается вниз, однако я не могу заставить его менять цвет, когда он находится назад в верхней части страницы.

<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> 

Любые идеи о том, как это сделать?

Answer 1

Использование CSS3 transition с JQuery:

Вы можете добавить переход CSS3 к header в пользовательский класс, где вы можете установить желаемый цвет.
чем с JQuery вы просто добавить/удалить этот класс:

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 :) */ 
} 

---

Решение, которое использует JQuery UI: Для поддержки более браузеров нравится:

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>