android - 移动菜单在滚动时自动关闭 - 如何永久隐藏或保留地址栏？

Question

我一直在为我设计的一些网站设计的响应式菜单出现问题。它的 jQuery 部分用于根据窗口宽度显示或隐藏菜单(并隐藏/显示一个条来切换它)。

在移动浏览器中，当您滚动时切换打开的菜单将再次关闭——但前提是地址栏已被隐藏或通过向下或向上滚动显示。这发生在 Android 和 iOS 中。

我明确将范围缩小到地址栏的出现和消失，因为:

• 它只发生在移动浏览器上。
• 当页面仍在加载时地址栏不会消失(至少在 Opera 中是这样)，因此当我在这种情况下滚动时菜单不会关闭。
• 如果我在隐藏地址栏后滚动，菜单不会关闭。

但是，我不知道如何修复它；地址栏影响窗口/页面的高度，而不是宽度，所以我不确定为什么当您向上/向下滚动时菜单会切换。这种方法是我制作响应式菜单的最简单方法，其中包含当前的设置方式。

这是我正在使用的代码的相关部分:

    var winwidth = $(window).width();
    $(window).resize(function() {
        var newwinwidth = $(window).width();
        if(winwidth = newwinwidth && newwinwidth <= 768) {
            // if smaller or equal
            $('.menu ul').hide();
        } else {
            // if larger
            $('.menu ul').show();
        }
    }).resize();

这是发生这种情况的网站的一个实例:http://jessicacantlope.com

我已经尝试了几种去抖动方法来查看是否可以解决问题(它没有；它只是延迟了操作)并且还搜索了这个网站。我已经包含了支持应用程序的元元素和一些其他特定于 iOS 的内容。

我还研究了完全隐藏地址栏的解决方案，但它们只能在特定条件下工作并且依赖于修改系统 UI/UX，这是我不想做的事情。我只想保持简单。

如有任何帮助，我们将不胜感激。我更像是一名设计师而不是开发人员，我喜欢优雅的解决方案。

编辑，2020 年:五年多后，在实现了一个似乎工作了一段时间但又失败的解决方案之后，我开始修补并意识到，对于我设计移动菜单和网站的方式，以及一些从那以后我尝试过的事情中，我一直在我的代码中错误地定位了错误的选择器!我还没有足够深入地思考如何应用第一个建议。它写得不优雅，所以我不会发布我的最终代码，但我终于得到了工作状态。谢谢大家!

Answer 1

我在自己的响应式网站上工作时遇到了同样的问题。我无法发现问题的根本原因，但我制定了解决方法。我用来显示菜单的 anchor 添加了一个“打开”切换类。我实际上使用了“window.onscroll”调用来检查每次用户滚动页面时是否应显示菜单，每次滚动后再次“显示”菜单。

window.onscroll = function (e) {  
    var sidebar = $('#sidebar')
    var menu = $('#sidebar > ul');
    if(sidebar.hasClass('open'))
        {
            menu.show();
        }
    } 

希望这对您有所帮助!