плавно меняйте положение элемента

Question

При прокрутке страницы я хочу плавно переместить меню в верхнюю часть страницы и изменить ее положение на липкое. Со следующим кодом я могу заставить меню исчезать при прокрутке.

Как я могу заставить его плавно перемещаться вверх, а затем вставлять туда вместо внезапного fadein?

Вот мой код:

JQuery:

$(function(){ 

    var menu = $('#menu'), 
     pos = menu.offset(); 

     $(window).scroll(function(){ 
      if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){ 
       menu.fadeOut('fast', function(){ 
        $(this).removeClass('default').addClass('fixed').fadeIn('fast'); 
       }); 
      } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){ 
       menu.fadeOut('fast', function(){ 
        $(this).removeClass('fixed').addClass('default').fadeIn('fast'); 
       }); 
      } 
     }); 

}); 

CSS:

.fixed { 
    position: fixed; 
    top: -5px; 
    left: 0; 
    width: 100%; 
} 

Демо: http://jsfiddle.net/ZzzxL/

Answer 1

Если вы удалите из вашей плавного изменения функции Jquery, вы должны добиться того, что вы хотели:

$(window).scroll(function(){ 
    if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){ 
     menu.removeClass('default').addClass('fixed'); 
    } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){ 
     menu.removeClass('fixed').addClass('default'); 
    } 
}); 

Example