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

Question

您好，我使用 fullpage.js 创建了一个网站，它非常棒，可以在部分（整页）之间滚动，但在手机上导航可能会很困难，所以我让它在宽度低于 640 像素时连续滚动。

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

在手机上连续滚动后此功能不起作用，但它仍然适用于计算机浏览器。我不知道我是否在寻找某些东西，或者我是否可以为菜单切换编写更好的脚本。 请查看 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);
}