嗨，我使用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();
}
您不应使用URL中的更改来触发任何操作。这不是使用fullPage.js的方法。您应该使用插件提供的回调，例如onLeave或afterLoad。或者，您甚至可以按照本教程中的建议使用添加到body元素中的类
原因是因为由于Mobile Chrome中的位置哈希行为存在问题， fullPage.js不会更改位置哈希，而是将HTML5历史记录API用于手机。
//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);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句