I am attempting to create a jQuery top menu that adjusts its height based on the window scroll position. Using $(selector).css("height", "value") works fine, but when I try to animate it, it doesn't behave correctly. Here is my code. Thank you for your assistance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
<nav style="background-color:red; height:100px;" class="navbar-fixed-top navbar navbar-default my-navbar">
</nav>
<div style="width:100%; height:2000px; background-color:blue;" class="content">
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var top=$(window).scrollTop();
if(top>10){
$(".my-navbar").animate({height: '50px'}, "slow");
}else{
$(".my-navbar").animate({height: '100px'}, "slow");
}
})
})
</script>
</body>
</html>