Text/Logo in Navbar scheint zu wackeln/vibrieren auf Scroll

Question

Ich schrieb Code, um das Logo in meinem Nav-Leiste erweitern-Vertrag, wenn ich blättern, ähnlich wie die Wall Street Journal Website funktioniert. Wenn ich jedoch blättern gehe, wird das Logo und die anderen Elemente in der Nav-Leiste nun mit Wackeln/Vibrieren versehen.

JQuery:

$(window).on('scroll', function() { 
    var scrollTop = $(window).scrollTop(); 
    if (scrollTop > 50) { 
     $('#logo').stop().animate({height: "50px"},100); 
     $('#nav').css({height: "110px"}); 
    } 
    else { 
     $('#logo').stop().animate({height: "70px"},100); 
     $('#nav').css({height: "130px"}); 
    } 
}); 

CSS:

#logo { 
    height: 70px; 
    width: auto; 
    margin: auto; 
    display: block; 
    margin: auto; 
} 
#nav{ 
    display: block; 
    max-width: 100%; 
    height: 120px; 
    position: relative; 
    margin: 0; 
    background-color: rgba(249,249,249,1); 
    font-family: MyriadPro-RegularImport; 
} 

Answer 1

Ich würde empfehlen, jQuery mit einer Klasse hinzuzufügen, dann CSS-Übergänge für die Animation verwenden:

$('#logo').addClass('scrolled'); 

CSS:

#logo { 
    height: 70px; 
    transition: all 200ms ease-out; // using 'all' so that all properties are animated 
} 

#logo.scrolled { 
    height: 50px; 
} 

CSS-Animationen werden flüssiger und einfacher zu beheben.