當用戶向下滾動窗口時將div的淡入淡出顏色作爲用戶向下滾動窗口JAVASCRIPT

我有一個頭部div，其ID爲「#box」，我已經將其固定在頂部作爲我的頁面，因此當您向下滾動頁面時，它始終保持在那裏。我現在擁有的是當用戶向下滾動時，如果標題返回頂部，則使用{window.pageYOffset> 50}將標題div的背景顏色從其不透明狀態更改爲50％透明度，並返回原始透明度。所以它基本上從一種固態到另一種，我希望找到一種方式讓它從其開始的50％透明度淡出到其不透明狀態，並使用Javascript淡入淡出。下面我有我的原始場景的原始代碼，下面是我嘗試創建淡入效果，但完全卡住。它根本不工作，沒有任何反應。使用Jquery會更容易嗎？當用戶向下滾動窗口時將div的淡入淡出顏色作爲用戶向下滾動窗口JAVASCRIPT

原始場景：

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

}）;

來源

2014-06-24 Anish S.

如果它不運行和顏色的變化，但不轉型，實現轉型的一個簡單的方法是，通過添加CSS ATTRIB「過渡：背景1S;」到頭部。

如果不是這樣，請您詳細說明什麼不起作用？我的意思是，功能沒有被調用？ etc ...

來源

2014-06-24 04:53:26 AccidentallyC

你是最棒的！ –

超棒的男人！非常感謝...這節省了我一堆不必要的JS –

Np。哦，不要忘記，過渡是特定於瀏覽器的，所以呃...爲Mozilla和IE等添加其他瀏覽器版本xD -webkit-transition，-moz-transition，-o-transition，transition。就像那個haha – AccidentallyC

當用戶向下滾動窗口時將div的淡入淡出顏色作爲用戶向下滾動窗口JAVASCRIPT

回答

相關問題