I have a question about my top navigation bar animation. While scrolling down, it seems to be working fine but the animation comes with a fade effect. I would like to achieve a slide-down effect for the background instead. Since scrolling doesn't trigger the slide down, I'm having trouble making it work as desired. Can anyone offer some assistance?
For reference, here is my site:
And here is the code snippet in question:
$(function() {
var floating_navigation_offset_top = $('#floating-nav').offset().top;
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop > floating_navigation_offset_top)
$('#floating-nav').stop().animate({'opacity':'1'},800).css({'position':'fixed','top': '0', 'z-index': '99'});
else
$('#floating-nav').stop().animate({'opacity':'0'},40);
});
});