在移動視圖中顯示問題與粘貼導航

Question

我剛剛完成了一個車庫的網站，有一個標題與導航下，並在滾動導航變得固定在屏幕的頂部。通常很簡單，並沒有問題在其他網站上做這件事。然而，在這個特定的項目中，如果在移動電話上加載，則10次中有9次存在導航在滾動上跳躍的問題，並簡單地留下白色條帶，在該白色條帶中將填充添加到頁面以適應新的狀態早已跳起來的導航。

該網站是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'); 
     } 
    } 

    ... 

} 

我建議要對此以不同的方式。也許通過更改偏移量，將它與菜單容器的偏移量進行比較。這解決了調整屏幕大小的問題，導致原始偏移計算也不正確。事情是這樣的

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

隨着JS是這樣的：

$(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'); 
     } 
    } 

    ... 

}