Navbar内のテキスト/ロゴがスクロールして振れて表示される

Question

Wall Street Journalのウェブサイトと同じように、スクロールするときにナビゲーションバー内のロゴを展開するコードを記述しました。しかし、スクロールすると、ロゴが表示され、nav-barの中の他の要素が動く/振動する。

の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

私はその後、アニメーションのためのCSSトランジションを使用して、クラスを追加するためにjQueryを使用することをお勧めします：

$('#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アニメーションはよりスムーズになり、トラブルシューティングが容易になります。