.bind('scroll'), add animation or reduce "bounce"

.bind('scroll'), add animation or reduce "bounce"

This is a jQuery script I'm using to have the menu fixed when users scroll
the page. This is a live demo.
<script>
var num = 170; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('#header').addClass('fixed');
} else {
$('#header').removeClass('fixed');
}
});
</script>
<style>
.fixed {
position:fixed;
top:0;
background-color:#e4e4e4;
width:100% !important;
background-image: url("images/logo_small.png") !important;
background-size:20px auto !important;
margin:0 auto !important;
padding:20px 0 10px !important;
background-position:90px center !important;
z-index:1;
}
#header {
background-image: url("images/logo.png");
background-position: 30px 5px;
background-repeat: no-repeat;
background-size: 152px auto;
font-size: 13px;
margin: 18px auto 0;
padding: 60px 0 87px 100px;
width: 780px;
}
</style>
Problem is, as you can see, when "small" menu appears there's a "jump",
and the content goes up abruptly.