Sayfayı aşağı kaydırdığınızda gezinme çubuğu nasıl renk değiştirir?

Question

Ben şeffaf olmaya gezinme çubuğunu istiyorum ama sayfada aşağı zaman örneğin kırmızı renk değişir. Böyle

<div class="nav"> 
     <div class="container"> 
     <div class="logo"> 
     <a href="#"><img src="RepublicSquare_logo.svg" style="height: 80px;"></a> 
     </div> 
     <div class="navMain"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 

Answer 1

şey: herkes (vanilya js) olmayan bir jquery çözüm arıyorsanız olurdu

http://jsfiddle.net/qrhjdfmd/

var a = $(".nav").offset().top; 

$(document).scroll(function(){ 
    if($(this).scrollTop() > a) 
    { 
     $('.nav').css({"background":"red"}); 
    } else { 
     $('.nav').css({"background":"transparent"}); 
    } 
}); 

Answer 2

, işte burada:

document.addEventListener("DOMContentLoaded", function() { 
    var scrollStart = 0; 
    var nav = document.querySelector(".nav"); 
    var offset = navbarElement.getBoundingClientRect(); 

    document.onscroll = function (e) { 
     scrollStart = e.target.scrollingElement.scrollTop; 
     if (scrollStart > offset.top) { 
      nav.style.background-color, rgba(34,34,34,0.9); 
     } else { 
      nav.style.background-color = "transparent"; 
     } 
    }; 
}); 

Answer 3

OP tarafından çözüm.

jQuery

$(document).ready(function(){  
    var scroll_start = 0; 
    var startchange = $('.nav'); 
    var offset = startchange.offset(); 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if(scroll_start > offset.top) { 
      $('.nav').css('background-color', 'rgba(34,34,34,0.9)'); 
     } else { 
      $('.nav').css('background-color', 'transparent'); 
     } 
    }); 
}); 

Bu şeffaf gezintinizi yapmalıdır ve kaydırma zaman RGBA değişecektir

.nav { 
transition-duration: 1s; 
} 

CSS (34,34,34,0.9) Bunun için