手机未检测到切换菜单的锚点更改

Question

您好，我使用 fullpage.js 制作了一个网站，它很棒，可以在各个部分（整页）之间滚动，但在手机上可能很难导航，所以我让它在宽度低于 640px 时连续滚动.

我有一个菜单，它会在锚点从主页更改后向下切换，并在锚点为主页时切换回来。这是因为主页上有一个内置菜单，所以不需要第二个。

在手机上连续滚动后此功能不起作用，但它仍然适用于计算机浏览器。我不知道我是不是在看东西，或者我是否可以为菜单切换编写更好的脚本。请看www.themeltingpotkitchen.com明白我的意思。

这是我的菜单 js。我会指出，如果您通过菜单点击链接，它会起作用，但不会通过滚动 :s

// detect anchor change and hide or show menu
        function locationHashChanged() {
            var hash = location.hash;
            var id = hash.replace(/^#/, '');
            // logic
            if (id == 'Home') {
                $("#nav_hide").slideUp();
            } else if (id == 'About') {
                $("#nav_hide").slideDown();
            } else if (id == 'Trailer') {
                $("#nav_hide").slideDown();
            } else if (id == 'Food') {
                $("#nav_hide").slideDown();
            } else if (id == 'Contact') {
                $("#nav_hide").slideDown();
            }
        }
        window.onhashchange = locationHashChanged;

        // if loaded page is home hide menu
        var hashVal = window.location.hash.split("#")[1];

        var p = window.location.pathname.split("/");
        var filename = p[p.length-1];

        if(hashVal == 'Home', filename == 'index.html') {
            $("#nav_hide").hide();
        }

Answer 1

您不应使用 URL 中的更改来触发任何操作。这不是使用 fullPage.js 的方法。您应该使用插件提供的回调，例如 onLeave 或 afterLoad。或者您甚至可以按照 this tutorial

中的建议使用添加到正文元素的 class

原因是 fullPage.js 不更改位置哈希，但 uses the HTML5 History API for mobile phones due to problems with the location hash behaviour in Mobile Chrome:

//Mobile Chrome doesn't work the normal way, so... lets use HTML5 for phones :)
if (isTouchDevice || isTouch) {
    history.replaceState(undefined, undefined, '#' + url);
} else {
    var baseUrl = window.location.href.split('#')[0];
    window.location.replace(baseUrl + '#' + url);
}

手机未检测到切换菜单的锚点更改

Mobiles not detecting anchor change to toggle menu

javascript

jquery

fullpage.js