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

中的建议使用添加到body元素的类

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

移动设备未检测到锚点更改为切换菜单

1 个答案: