モバイルビューの貼り付けナビで問題を表示

Question

ガレージ用のサイトを完成させました。その下にnavがあるヘッダーがあり、スクロールでは画面上部に修正が表示されます。通常はとてもシンプルで、他のサイトでこれを行うのに問題はありませんでした。しかし、この特定のプロジェクトでは、携帯電話にロードされた場合、10回のうち9回、スクロールで飛んでジャンプする問題があります。早く飛び込んだnav。

サイトはhttp://telstargarage.comであり、私が何をするにしても、このサイトはコードを投稿することはできません。正しくフォーマットされていないと、ヘルプに従っても、投稿されませんので、自由にサイトをフォークしてください。

Answer 1

コードを投稿していないため、診断が難しいです。

私はあなたの問題を推測しているとはいえここにある：

$(document).ready(function() { 
    var menu = $('.menu'); 
    // This is likely incorrect on document ready 
    var origOffsetY = menu.offset().top; 

    function scroll() { 
     if ($(window).scrollTop() >= origOffsetY) { 
      $('.menu').addClass('navbar-fixed-top'); 
      $('.scrolled').addClass('menu-padding'); 
     } else { 
      $('.menu').removeClass('navbar-fixed-top'); 
      $('.scrolled').removeClass('menu-padding'); 
     } 
    } 

    ... 

} 

私はこれについて別の道を進んで示唆しています。おそらく、オフセットを変更することで、それをメニューのコンテナのオフセットに比較しています。これはスクリーンのサイズ変更の問題を回避して、元のオフセット計算も不正確になる原因になります。このようなJSでこの

<div class="menu-container"> 
    <div class="menu"> 
     // Your menu in here 
    </div> 
</div> 

ような何か：迅速な対応のための

$(document).ready(function() { 

    function scroll() { 
     if ($(window).scrollTop() >= $('.menu-container').offset().top) { 
      $('.menu').addClass('navbar-fixed-top'); 
      $('.scrolled').addClass('menu-padding'); 
     } else { 
      $('.menu').removeClass('navbar-fixed-top'); 
      $('.scrolled').removeClass('menu-padding'); 
     } 
    } 

    ... 

}