Как сделать динамический навбар?

$(window).scroll(function(){ 
  if($(this).scrollTop() >=500 && $(this).scrollTop() < 1200) { 
    $('nav').css('background-color','green') 
  } 
  else if($(this).scrollTop() >= 1200) { 
    $('nav').css('background-color','red') 
  } 
  else { 
    $('nav').css('background-color','blue') 
  } 
})

* { 
  padding: 0; 
  margin: 0; 
} 
body { 
  height: 2000px; 
} 
nav { 
  text-align: center; 
  background-color: blue; 
  color: white; 
  position: fixed; 
  width: 100%; 
  padding: 10px; 
  transition: 1.5s; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<nav>меню</nav>