根據滾動在導航欄上更改rgba背景顏色

Question

我的頁面頂部有一個固定導航欄的靴子。基於頁面上的滾動位置，我想逐漸平穩地將背景顏色不透明度從0增加到0.75。我如何使用jQuery來做到這一點？

滾動前

.navbar-inverse { 
    background: rgba(53,145,204,0); 
} 

滾動〜500像素或更好，但100％的當前窗口的大小要達到這樣的

.navbar-inverse { 
    background: rgba(53,145,204,0.75); 
} 

Answer 1

用它來達到類似的效果：

$(function() { 
     //caches a jQuery object containing the header element 
     var header = $(".fade-transparent"); 
     $(window).scroll(function() { 
      var scroll = $(window).scrollTop(); 

      if (scroll >= 200) { 
       header.removeClass('fade-transparent').addClass("fade-background"); 
      } else { 
       header.removeClass("fade-background").addClass('fade-transparent'); 
      } 
     }); 
    }); 


.fade-background { 

     background-color: #3591cc; 
     background-color: rgba(53,145,204,0.75); 

     -webkit-transition: background-color 3s; 
    transition: background-color 3s; 

} 

.fade-transparent { 

     background-color: transparent; 

     -webkit-transition: background-color 1s; 
    transition: background-color 1s; 

} 

Answer 2

做之後？

$(document).scroll(function() { 
 
    var dHeight = $(this).height()-$(window).height(); 
 
    if (dHeight >= $(this).scrollTop()) { 
 
    $('nav').css('background', 'rgba(53,145,204,' + $(this).scrollTop()/dHeight + ')'); 
 
    } 
 
});

body { 
 
    margin: 0; 
 
} 
 
nav { 
 
    background: rgba(53, 145, 204, 0); 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
nav ul > li { 
 
    display: inline-block; 
 
} 
 
.container { 
 
    height: 1000px; 
 
    margin-top: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    </ul> 
 
</nav> 
 
<div class="container"> 
 
    <div> 
 
    Scroll me... 
 
    </div> 
 
</div>