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

[Anonymous]

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

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

$(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');
}
});
});< /code>
#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;
}< /code>


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


some content

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

Подробнее здесь: https://stackoverflow.com/questions/390 ... icky-menus