Problema extraño

Buenas,

He estado mucho tiempo dandole vueltas y mirando por internet pero no se me ocurre que puede ser.

Estoy creando una web y cuando el scroll llega al menu este se tiene que covertir en fixed para que se quede ahi, pero me sale un error muy extraño(adjunto captura) ->
https://drive.google.com/open?id=0BwhqsiVczz8LVlhCTWI2cUNxQjQ

El error es que el menu se queda parpadeando en dos posiciones diferentes.

Adjunto los codigos para que podais verlos bien.

Código:

$(document).ready(function(){
	"use strict";
	var altura = $('.menu').offset().top;
	$(window).on('scroll', function(){
		if ( $(window).scrollTop() > altura ){
			$('.menu').addClass("menu-fixed");
			$('.logo_barra').css('visibility', 'visible');
			$('.barra').css('position', 'fixed');
			$('.barra').css('top', '0');
			$('.barra').css('left', '0');
			$('.espacio').addClass("nav-ghost");
		} else {
			$('.menu').removeClass("menu-fixed");
			$('.logo_barra').css('visibility', 'hidden');
			$('.espacio').removeClass("nav-ghost");
			$('.barra').css('position', 'static');
		}
	});
 
});

Código:

*{margin: 0;padding: 0;
   -webkit-box-sizing:border-box;
	 -moz-box-sizing:border-box;
	 box-sizing:border-box;
}
/*################################*/
html{
	height: 100%;
}
body{
	background:#112244;
    height:100%;
	text-align: center;
	}
cuerpo {
 height: 100%;
	width: 100%;
	text-align: center;
}
/*###################################################*/
#superior{
	width: 100%;
	display: flex;
	align-items: center;
}
#logo{
	margin: auto;
	margin-top: 10px;
	display:block;
	text-align: center;
	
}
/*################################################*/
.barra{
	display: inline-flex;
	width: 100%; 
	height: 150px;
	background: #112244;
}
.logo_barra{
	height: 150px;
	width: 150px;
	visibility: hidden;
	position: inherit;
	z-index: 2000;
}
.proporcion{
	height: 120px;
	width: 120px;
	margin: 15px 15px 15px 15px;
	position: inherit;
}
.logo_falso{
	height: 150px;
	width: 150px;
	position: inherit;
}

/*##################################################*/
header{
	width:100%; 
	overflow:hidden; 
	margin-bottom:20px;
}
header nav {
	line-height: 150px;
	background: #112244;
	width: 100%;
	position: inherit;
}
 
header nav a {
	display:inline-block;
	color:#fff;
	text-decoration:none;
	padding:10px 20px;
	line-height:normal;
	font-size:20px;
	font-weight:bold;
	-webkit-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
}
header nav a:hover {
	background:#f56f3a;
	border-radius:50px;
}
.menu-fixed {
	position:fixed;
	z-index:1000;
	top:0;
	left: 0;
	box-shadow:0px 4px 3px rgba(0,0,0,.5);
	border-radius:50px;
}
espacio{
	width: 100%;
}
.nav-ghost {
	height: 86px;
}
/*##############################################*/
@media screen and (max-width: 950px) {
	
	header nav {
		width:100%;
		text-align:center;
		line-height:100px;
	}
}
/*####################################################*/
 #pie{
		position:relative;
		bottom:0;
		left:0;
	    width:100%;
	    height:auto;
	    background-color: black;
	    opacity:0.6;
		color:white;
		text-align:center;
		border-top:2px solid white; 
		display: flex;
		align-items: center;
		justify-content: center;
	    margin-top: 20px;
		
	}
#pie:hover{
	opacity:0.74;
	}
#foot{
	display: inline-flex;
	vertical-align: middle;
}

#icono_pie{
    padding-top: 5px;
	padding-bottom: 5px;
	opacity:0.2;	
}
#icono_pie:hover{
	opacity: 0.8;
}
.letras_pie {
	font-size:16px;
}
/*######################################################*/
label {
    margin-top:20px;
    letter-spacing:1px;
	text-align: center;
	background: #fff;
	padding: 5px 5px 5px 5px;
	border-radius: 10px;
	border:1px solid #000000;
}
.formulario {
    display:flex;
	flex-direction: column;
    margin:0 auto;
    width:auto;
    font-family:Arial;
	text-align: center;
	align-items: center;
}
form {
    margin:0 auto;
    width:auto;
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
 
input, textarea {
    width:400px;
    height:34px;
    background:#fff;
    border:2px solid #000000;
	border-radius: 10px;
    padding:10px;
    margin-top:10px;
    font-size:16px;
    color:#000;
}
 
textarea {
    height:200px;
}
 
#submit {
    width:105px;
    height:45px;
    border-radius:30px;
    margin-top:20px;
    cursor:pointer;
	color: black;
}
#submit:hover {
background: #f56f3a;
}
#mensaje{
	height: auto;
	min-height: 200px;
}

Código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/apariencia.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/menu.js"></script>
<script src="js/form_fondo_label.js"></script>
<title>Train Your C</title>
</head>
<body>

<header>

<div id="superior"><img id="logo" src="imagenes/ctrain.png"></div> 
<section class="barra">
<div class="logo_barra"><img src="imagenes/ctrain.png" class="proporcion"></div>

	<nav class="menu">
	    <a href="index.html">Inicio</a>
		<a href="propuesta.html">Propuesta</a>
		<a href="funcionamiento.html">Funcionamiento</a>
		<a href="contacto.html">Contacto</a>
		</nav>
		
		<div class="logo_falso"></div>
		</section>
	</header>
     
	<div class="cuerpo"><div class="espacio"></div>
<section class="formulario">
<form action="contact.php" method="post">
<label for="nombre" class="label_nombre">Nombre</label>
 <input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="flase" />
 <label for="email" class="label_email">Email</label>
 <input id="email" type="email" name="email" placeholder="ejemplo@correo.com" required="true" />
 <label for="mensaje" class="label_mensaje">Mensaje</label>
 <textarea id="mensaje" name="mensaje" placeholder="Mensaje" required></textarea>
 <input id="submit" type="submit" name="submit" value="Enviar" />
</form>
	</section>
  </div>
  <br><br><br><br><br><br><br><br>
<div id="pie">	
	<img id="icono_pie" src="imagenes/icono.png">
	<div id="foot"><p class="letras_pie">Copyright &copy; Train Your C</p></div>
</div>

</body>
</html>

Muchas gracias