在移动视图中显示词缀导航问题

Question

我刚刚完成了一个车库网站，它下面有一个带有导航的标题，滚动时导航固定在屏幕顶部。通常非常简单，并且在其他站点上执行此操作没有问题。然而，在这个特定的项目中，如果在手机上加载，10 次中有 9 次出现导航在滚动时向上跳跃的问题，短暂地留下一个白色条带，其中填充添加到页面以适应新的状态早早跳起来的nav。

该站点是http://telstargarage.com，无论我做什么，该站点都不允许我发布代码，因为它说它的格式不正确，即使我遵循了帮助，并且在预览中看起来一切都很美好，它不会发布，所以请随时 fork 网站。

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

    ...

}