Come si fa a cambiare la barra di navigazione quando si scorre la pagina verso il basso?

Question

Vorrei che la barra di navigazione fosse trasparente, ma quando si scorre verso il basso la pagina cambia ad esempio il colore rosso.

<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

Qualcosa di simile a questo:

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

Se uno vuol essere alla ricerca di una soluzione non jquery (js vaniglia), eccolo:

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

Soluzione con OP.

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

CSS

.nav { 
transition-duration: 1s; 
} 

Questo dovrebbe rendere la navigazione trasparente e quando si scorre cambierà a RGBA (34,34,34,0.9)