スティッキーnavbarはモバイル上のバグを持っています

Question

私は2つのスティッキーなナビゲーションバーを持っています。最初の白いものはWordpressからスティッキー機能を持っていて、黒いものはhtml/css-only（ブートストラップなし）です。突然

しかし、私はスクロールダウンしたときに、少しでもあれば、バウンスの黒のナビゲーションバーの種類：私は最初のページをロードすると、それはこのような良いに見える

：ので、私はお見せしましょう説明するのは難しいです非常に迅速にコンテンツを「ジャンプ」させます。コンピュータからwebpageをロードするときにバグがないので、なぜこれが起こっているのかわかりません！それは携帯電話の唯一の問題です。 ：私はscrollTopが0ないときにのみposition: fixedを追加見ることができるものから、S

jQuery(window).scroll(function() { 
    if (jQuery(window).scrollTop() > 0) { 
     jQuery('#navbar_reservas').addClass('navbar-fixed'); 
    } 
    if (jQuery(window).scrollTop() <= 0) { 
     jQuery('#navbar_reservas').removeClass('navbar-fixed'); 
    } 
}); 

CSS

.navbar-fixed { 
    top: 60px; 
    z-index: 1000; 
    position: fixed; 
    width: 100%; 
} 

HTML

<div id="navbar_reservas"> 
    <div id="reservas_left"> 
     <div class="nav-item_reservas" id="inner_reservas_left"> 
       <a id="dudas" href="tel:55555555"> 
        ¿Dudas? 
        <br />555 555 555     </a> 
     </div> 
    </div> 
    <div id="reservas_right"> 
     <div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right"> 
      <div class="dropbtn"> 
      TOTAL 
      <br /><span id="totalprice">0,00€</span> 
      <i class="material-icons">arrow_drop_down</i> 
      </div> 
     </div> 
    </div> 
    <div class="dropdown-content_reservas" id="myDropdown"> 
     <ul id="dropul" class="unoul"> 
      <li id="drop2"></li> 
      <li id="drop3"></li> 
      <li id="drop4"></li> 
      <li id="drop5"></li> 
      <li id="drop6"></li> 
     </ul> 
    </div> 
</div> 

Answer 1

。これにより、クラスが適用されるときに新しいスタッキングコンテキストが作成されます。それは、それがもはや配置の点でそれの周りの要素に「可視」にならないことを意味します。そしてそのようなものとして、その下のコンテンツは、ギャップを埋めるために飛び立つでしょう。ナビゲーションバーは、navbar-fixedクラスを持っていることは、独自のスタッキングコンテキストで常にですので、それにposition: absoluteを適用していない

：あなたはすでにナビゲーションバーの高さを知っている場合

は、本当に簡単な解決策があります。次に、ナビゲーションバーの高さを上部のパディング/マージンとしてその下のコンテンツに追加します。

あなたは高さがわからない場合：

あなたは上記と同じ操作を行いますが、負荷にJavaScriptでそれの高さを計算する必要があります。 resizeと言って高さが変わったり、動的に変化するコンテンツがある場合は、これらのイベントが発生したときに上記のメソッドの高さを更新する必要があります。

あなたが比較的新しいコードで作業することができた場合：

このすべてのCSSプロパティがあります！ position: stickyとtop: 0を組み合わせると、ナビゲーションバーが画面上部にスティックされ、そうでない場合は、ビューポートの背後でが表示されます。

しかし、ブラウザのサポートは非​​常に印象的ではありません。 http://caniuse.com/#feat=css-sticky