사용자가 창을 아래로 스크롤 할 때 div의 불투명도로 색을 바꿉니다 JAVASCRIPT

Question

"#box"라는 ID를 가진 머리글 div가 있습니다. 내 페이지의 맨 위에 고정되어 있으므로 페이지를 아래로 스크롤 할 때 그대로 유지됩니다. 현재 내가 가진 것은 사용자가 아래로 스크롤 할 때 헤더 div의 배경색이 {window.pageYOffset> 50}을 사용하여 불투명 상태에서 50 % 투명도로 바뀌고 머리글이 맨 위에 있으면 원래의 투명도로 돌아갑니다. 기본적으로 하나의 솔리드 스테이트에서 다른 솔리드 스테이트로 이동합니다. Javascript를 사용하여 페이드 인 효과를 사용하여 불투명 상태로 50 % 투명성을 시작하는 방법을 찾아 내고 싶습니다. 아래에서 필자의 원래 시나리오를위한 원본 코드를 가지고 있으며, 아래에는 효과가 있지만 페이드를 만들기위한 시도가 있습니다. 전혀 작동하지 않으며 아무 일도 일어나지 않습니다. Jquery 사용이 더 쉬울까요?

원본 시나리오 :

window.onscroll = scroll;

function scroll() { 
    var header=document.getElementById("header1"); 

    console.log(window.pageYOffset); 
    if(window.pageYOffset > 50){ 
    console.log("Change Opacity now"); 
     document.getElementById("header1").style.backgroundColor="rgba(38, 28, 63, 1.0)"; 
    } 
    else{ 
     document.getElementById("header1").style.backgroundColor="rgba(38, 28, 63, 0.5)"; 

    } 

} 

페이드 시도 :

window.onscroll = 스크롤;

function scroll() { 
    var header=document.getElementById("box"); 

    console.log(window.pageYOffset); 
    if(window.pageYOffset > 0){ 
     var color = [38, 28, 63].join(',') + ',', 
     transparency = 1, 
     element = this, 
     timeout = setInterval(function(){ 
      if(transparency < 0){ 
       element.style.backgroundColor = 'rgba(' + color + (transparency -= 0.015) + ')'; 
     } else { 
      clearInterval(timeout); 
     } 
    }, 40); 

}); 이 실행 않으며, 색상 변경하지만 전환하지 않는 경우

} 

Answer 1

• , 전환을 달성하는 쉬운 방법은 CSS를 ATTRIB 추가하는 것입니다 '전환 : 배경 1 초를;' 헤더에.

그게 아니라면, 작동하지 않는 부분을 자세히 설명해 주시겠습니까? 그 말은 기능이 불리지 않는 것입니까? 등 ...