Плавная CSS-анимация для липких меню. ⇐ Jquery

[Anonymous]

У меня есть меню заголовка, которое прилипает сверху, когда пользователь начинает прокручивать вниз, а логотип уходит за пределы экрана. Логотип в меню также становится меньше. Это мой CSS-код:

Код: Выделить всё

$(function() {
// Check the initial Position of the Sticky Header
var stickyHeaderTop = $('#logo').offset().top + 160;

$(window).scroll(function() {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#logo').addClass('fixed');
} else {
$('#logo').removeClass('fixed');
}
});
});

Код: Выделить всё

#logo img {
height: 145px;
margin: 10px 0 0;
transition: height 1s ease 0s;
}

.fixed img {
height: 55px !important;
position: fixed;
top: 0;
z-index: 3;
}

main {
height: 1000px;
}

Код: Выделить всё

[img]https://www.gravatar.com/avatar/ca71f423aadaa366bd910dfcb1a25d0b?s=48&d=identicon&r=PG[/img]


some content

У меня есть дополнительный скрипт jQuery для добавления «фиксированного» класса в DIV.
Моя проблема в том, что изменение размера изображения логотипа происходит плавно, а не позиционирование, потому что логотип должен плавно опускаться, а вместо этого он просто появляется на месте.
Что мне здесь не хватает?
Спасибо.