Fiz um exemplo aqui usando jQuery, que ao detectar o movimento da barra de rolagem, verifica o posicionamento dela com .scrollTop()
e mudo a propriedade do menu, conforme o movimento da barra.
Note que o efeito de transição esta no css na seguinte linha:
transition: 0.5s ease-in;
Veja o resultado:
$(document).ready(function() {
$(document).scroll(function() {
if ($(this).scrollTop() > 200) {
$("#menu").css("background-color","#fff");
} else {
$("#menu").css("background-color","#000");
}
});
});
* {
margin: 0;
padding: 0;
}
#menu {
position: fixed;
height: 60px;
background-color: #000;
width: 100%;
transition: 0.5s ease-in;
}
#todo {
height: 1200px
}
.branco {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu"></div>
<div id='todo'></div>