Skip to main content
2 de 2
correcao
LocalHost
  • 3,3mil
  • 1
  • 11
  • 26

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;
  padding:20px;
  background-color: #000;
  width: 100%;
  transition: 0.5s ease-in;
  text-align:center;
}
#menu a{color:#0dc; font-family:Arial; font-size:18px}

#todo {
  height: 1200px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<a>Sou um menu</a>
</div>
<div id='todo'></div>

LocalHost
  • 3,3mil
  • 1
  • 11
  • 26