在移动视图中显示附加导航的问题

Question

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

该站点是 http://telstargarage.com，无论我做什么，该站点都不会让我 post 代码，因为它说它的格式不正确，即使我按照帮助，而且在预览中看起来一切都很美好，它不会 post，所以请随时分叉该站点。

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

    ...

}

在移动视图中显示附加导航的问题

Display issue with affix nav in mobile view

javascript

jquery

twitter-bootstrap

mobile

affix