El script que he hecho es para cambiar el tamaño de un elemento de forma animada al hacer un scroll en la página.
Cuando hago scroll hacia abajo, la animación se hace automáticamente, pero al volver al top de la página, la animación tarda unos 5 segundos en empezar, y no consigo averiguar porqué. Lo que me parece más raro es que si en lugar de animate pongo slideDown / slideUp no hay que esperar para ninguno de los dos, lo hace automáticamente.
¿Qué puede estar pasando?
Este es el código del documento html completo...
Código HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>scrolling</title>
<style>
header {
width: 100%;
height: 126px;
position: fixed;
background: #eee;
}
p {
height: 2000px;
}
</style>
</head>
<body>
<header></header>
<p></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script>
$(window).scroll(function(event) {
var scrollingTop = $(window).scrollTop();
if (scrollingTop > 10) {
$('header').animate ( { height: '27px' } );
};
if (scrollingTop == 0) {
$('header').animate ( { height: '126px' } );
};
});
</script>
</body>
</html> 
