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

【问题标题】：Mobile menu closes automatically on scroll - how to hide or keep the address bar permanently?移动菜单在滚动时自动关闭 - 如何永久隐藏或保留地址栏？
【发布时间】：2014-12-28 22:41:18
【问题描述】：

我一直在为我设计的一些网站处理响应式菜单时遇到问题。它的 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 年：五年多后，在实施了一个似乎工作了一段时间但又再次失败的解决方案后，我开始修补并意识到，对于我设计移动菜单和网站的方式，以及一些从那以后我尝试过的事情中，我错误地在我的代码中定位了错误的选择器！我还没有深入思考如何应用第一个建议。它写得并不优雅，所以我不会发布我的最终代码，但我终于得到了工作状态。谢谢大家！

【问题讨论】：

标签： android jquery ios mobile menu

【解决方案1】：

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

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

希望这会有所帮助！

【讨论】：

非常感谢，这是一个不错的解决方法，我现在已经实施了！当然，当滚动导致地址栏隐藏并因此再次触发调整大小时，菜单仍然会暂时消失，然后通过此解决方案返回。如果它闪烁得更快，它就不会让我如此烦恼。我想知道有没有办法控制它？我也在考虑提出一个更加面向 CSS 的解决方案。但这是我一直在寻找的东西，再次感谢。

【解决方案2】：

我也遇到过同样的问题。但我修复了解决方案。问题是，在滚动页面时会触发 window 的 resize 事件。当它将检查窗口的宽度时，它小于 768px。所以菜单将被隐藏。有两种解决方案。第一个，您可以删除窗口调整大小功能。第二个，在窗口调整大小功能中，您应该检查导航是打开还是关闭。据此，您可以自定义隐藏和显示过程。这意味着，如果导航关闭且窗口宽度大于 768 像素，则可以显示导航。

【讨论】：

谢谢！这为我解决了！我只需要在其中一个调整大小函数周围添加一个 if 语句来检查菜单当前是否打开，然后它不再触发菜单 .slideUp() =)

【解决方案3】：

我也遇到了同样的问题，无论我用匹配 dom 的高度或宽度的 resize() 函数做什么，该函数仍在移动设备上触发，所以我尝试使用 $(window).on("orientationchange", function() 并且问题得到了解决。

【讨论】：

【解决方案4】：

我在这里找到了问题的解决方案javascript resize event on scroll - mobile

    var cachedWidth = $(window).width();
$(window).resize(function(){
    var newWidth = $(window).width();
    if(newWidth !== cachedWidth){
        //PUT YOUR RESIZE HERE
        cachedWidth = newWidth;
    }
});

【讨论】：