JQuery 스크롤 애니메이션 색상

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> 

방법에 대한 아이디어가 있으십니까? jQuery로

Answer 1

사용 CSS3 transition : 당신이 원하는 색상을 설정할 수

당신은 사용자 정의 클래스에 header에 CSS3 전환을 추가 할 수 있습니다.

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를 사용 0 jQuery를 함께 그냥 클래스를 추가/제거보다
은 더 많은 브라우저가 마음에 드십니까 지원하기 :

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>