在移动视图中显示问题与粘贴导航

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

    ... 

}