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

    ...

}

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

1 个答案: