Reibungslose CSS-Animation für Sticky-Menüs ⇐ Jquery

[Anonymous]

Ich habe ein Kopfzeilenmenü, das oben angezeigt wird, wenn der Benutzer nach unten scrollt, und das Logo aus dem Bildschirm verschwindet. Auch das Logo auf der Speisekarte wird kleiner. Das ist mein CSS-Code:

Code: Select all

$(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: Select all

#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: Select all

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


some content

Ich habe ein zusätzliches jQuery-Skript zum Hinzufügen der Klasse „fixed“ zum DIV.
Mein Problem hierbei ist, dass die Größenänderung des Logobilds reibungslos verläuft, nicht so die Positionierung, da das Logo reibungslos herunterkommen sollte und stattdessen einfach an Ort und Stelle erscheint.
Was fehlt mir hier?
Vielen Dank du.