jQuery不透明度緩慢褪色

Question

我有一個屏幕div覆蓋超大橫幅集。從一開始，疊加層需要設置爲0.5不透明度，然後當用戶開始滾動約300px時間段的滾動時，它會輕輕地淡入到0.9不透明度，然後在該處停止，如果用戶從頂部滾動回到小於300px那麼它開始褪色緩慢回到0.5不透明度。我只是在div上使用背景顏色。

雖然我有點卡住了。到目前爲止，我有以下但當你開始滾動它去到0不透明度然後從那開始和褪色到0.9，然後在300px它去1不透明度然後301px如果跳回到0.9不透明度。

$(function() { 
    divFade = $(".fadeScreen"); 
    var toggleHeader = function (noAnimate) { 

     var threshold = 1, 
      fadeLength = 300, 
      opacity, 
      scrollTop = $(document).scrollTop(); 

     if (scrollTop < threshold) { 
      opacity = 0.5; 
     } else if (scrollTop > threshold + fadeLength) { 
      opacity = 0.9; 
     } else { 
      if (noAnimate) { 
       opacity = 0.9; 
      } else { 
       opacity = (scrollTop - threshold)/fadeLength; 
      } 
     } 
     divFade.css("opacity", opacity); 
    }; 

    toggleHeader(true); 
    $(window).scroll(function() {toggleHeader();}); 
}); 

我只需要它，所以當頁面加載不透明度爲0.5，之間滾動它慢慢變成0.9和停留，然後滾動備份當它消失回0.5透明度。

感謝您的任何幫助。

Answer 1

這個怎麼樣

$(function() { 
    divFade = $(".fadeScreen"); 
    var toggleHeader = function(noAnimate) { 

    var threshold = 1, 
     fadeLength = 300, 
     minOpacity = 0.5, 
     maxOpacity = 0.9, 
     opacity = minOpacity, 
     opacityDiff = (maxOpacity - minOpacity), 
     scrollTop = $(document).scrollTop(); 

    if (scrollTop < fadeLength) { 
     opacity += (scrollTop/fadeLength) * opacityDiff; 
    } else { 
     opacity = maxOpacity; 
    } 
    console.log(scrollTop); 
    divFade.css("opacity", opacity); 
    }; 

    toggleHeader(true); 
    $(window).scroll(function() { 
    toggleHeader(); 
    }); 
});