スクロールでNavbarのサイズを変更する

Question

ユーザーがスクロールするときにナビゲーションバーのサイズを小さくしようとしています。 これは私がこの機能挿入を持ってwebsite

私のURLです：私は考えることができるすべてを試してみました

nav.art-nav{ 
    background-color:#ccc; 
    -webkit-transition: all 0.4s ease; 
    transition: all 0.4s ease; 
} 
nav.art-nav.shrink { 
    min-height: 35px; 
} 

：

$(window).scroll(function() { 
    if ($(document).scrollTop() > 50) { 
    $('nav').addClass('shrink'); 
    } else { 
    $('nav').removeClass('shrink'); 
    } 
}); 

（ワードプレスではJavaScript/CSS /プラグインを使用して）CSSの例を編集するにはjs fiddle スイートに私のサイトにはありますが、サイズを変更することはできませんので、アドバイスをいただければ幸いです。

ありがとうございました

Answer 1

JSFiddleの例は、navbarに固定された高さがないために機能します。あなたの.art-navはありません。

min-height: 35px;をheight: 35px;に変更するとうまくいくと思います。

Answer 2

私はそれが今取り組んでいる

.art-nav{ 
    background-color:#ccc; 
    -webkit-transition: all 0.4s ease; 
    transition: all 0.4s ease; 
} 
.shrink { 
    min-height: 35px; 
} 

に上記の変更 - あなたの@Bertをありがとう、私は上記に変更しようとした私は、これはArtisteerを使用して他の人がテーマを作成した役立つことを願って:)