javascript - 手机未检测到切换菜单的 anchor 更改

Question

您好，我使用 fullpage.js 制作了一个网站，该网站非常棒，可以在各部分(整页)之间滚动，但在移动设备上导航可能很困难，所以我让它在宽度低于 640px 时连续滚动。

我有一个菜单，当 anchor 从主页更改时，该菜单会向下切换，当 anchor 是主页时，该菜单会切换回来。这是因为主页上有一个内置菜单，因此不需要第二个。

在手机上连续滚动后，此功能不起作用，但在计算机浏览器上仍然有效。我不知道我是否忽略了某些东西，或者我是否可以为菜单切换编写更好的脚本。请访问 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 中的建议使用添加到 body 元素的类。

原因是 fullPage.js 不会更改位置哈希，而是 uses the HTML5 History API对于手机，由于 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);
}