jQuery fadeIn or animate when scrolled past a certain point

jQuery fadeIn or animate when scrolled past a certain point

So I have a navigation somewhere on my header, when a user scroll pass the
navigation I want to minimize it and fadeIn or animate it back as a fixed
navigation to the top of page, I made it work with the following jquery
code but the issue is that it does the job with css, if I try to replace
it with animate, it keeps repeating itself for each pixel it passes.
here is the code:
function fixDiv() {
var $cache = $('.stickynav');
if ($(window).scrollTop() > 127)
$cache.css({'position': 'fixed','top': '0px','height': '40px'}),
$('#logo img').css({'height': '30px', 'position': 'relative', 'bottom':
'10px'}),
$('#main_menu_container').css({'bottom': '40px'});
else
$cache.css({'position': 'relative','top': '0px', 'height': 'auto'}),
$('#logo img').css({'height': 'auto', 'position': 'auto', 'bottom': 'auto'}),
$('#main_menu_container').css({'bottom': 'auto'});
}
$(window).scroll(fixDiv);
fixDiv();