My top nav has an animation. While scrolling down it works fine, but the animation es with fade effect. What i want is slidedown effect of the background. As scroll doesn't trigger the slide down, Cant make it work like sliding down. can anyone help me?

here is my site:

and here is my code:

$(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);
});

});

My top nav has an animation. While scrolling down it works fine, but the animation es with fade effect. What i want is slidedown effect of the background. As scroll doesn't trigger the slide down, Cant make it work like sliding down. can anyone help me?

here is my site:

http://goo.gl/8xt1XZ

and here is my code:

$(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);
});

});

• javascript
• jquery
• html
• css
• animation

• "but as scroll don't trigger the slide down" What do you mean? – A. Wolff Commented Mar 8, 2014 at 15:53
• Please check the site. I meant when i scroll the slideDown() is not working there. only i found animate() working. – Samia Ruponti Commented Mar 8, 2014 at 15:55

1 Answer 1

From what I understand, if you want a slide down effect, instead of animating opacity, simply animate the height from 0 to the height of your slide down menu.

update:

Even better, as per Alexander Lozada's ment, you can use .slideDown() function.

$(selector).slideDown(speed,callback);

further update: as requested, here's a simple fiddle

note: for slideDown to work, element should be hidden by JQ methods such as slideUp(), or css display:none etc