ブランドイメージのスクロール時にブートストラップメニューが縮まる - モバイルの動作

Question

多くの例から借用ナビゲーションバーをスクロールすると、ページの上部に貼り付けられたブートストラップのnavbarが作成され、ロゴイメージが100ピクセルから50ピクセルに縮小します高さは、デスクトップPC、通常の幅のブラウザで完全に動作します。

モバイルデバイスのサイズが767px未満の場合は、ハンバーガーメニューと簡単なブートストラップのドロップダウンメニューを有効にするためのパラメータを設定しました。

ブラウザが非常に狭く、小さなデバイスで初めてページにアクセスした場合は、一番上にあるハンバーガーアイコンをクリックすると、メニューが表示され、約50ピクセルの位置に表示されます。ロゴ（100pxの高さ）。数分の1秒以内に100pxのロゴの下にジャンプします。私が排除したいのは、この厄介な短命の行動です。また、メニューを折りたたむと起こります。そうでなければ、それは計画通りに動作します。

私のjavascript：

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

関連するCSS：

body { 
    padding-top: 100px; 
} 

.navbar { 
    min-height: 101px; /* to get the 100px tall image contained within navbar */ 
} 

.navbar.shrink { 
    min-height: 51px; 
    background: white; 
    -webkit-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

img { 
    max-height: 100px; 
    -webkit-transition: all 0.4s ease; 
    transition: all 0.4s ease; 
} 

img.shrink { 
    max-height: 50px; 
    -webkit-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

/* adjust top position of menu on small device due to larger logo */ 
@media (max-width: 767px) { 
    .collapse { margin-top: 50px; } 
    nav.navbar.shrink .collapse { 
    margin-top: 0px; 
    -webkit-transition: all 0.8s ease; 
    transition: all 0.8s ease; 
    } 
} 

参照のデモ：

http://www.dottedi.biz/demo/code/public/navbars/shrinking-navbar+logo-scroll.html

Answer 1

あなたは

ここで間違った選択をターゲットにしています210

代わりにメディアクエリで

.collapse { 
    margin-top: 50px; 
} 

、

.navbar:not(.shrink) .navbar-collapse { 
    margin-top: 50px; 
} 

これはあなた

添付のimg https://i.stack.imgur.com/uAVQr.jpg