嗨,我使用fullpage.js创建了一个网站,该网站很棒并且可以在各部分(整页)之间滚动,但是在移动设备上可能难以导航,因此当宽度小于640px时,我使其连续滚动。
我有一个菜单,当锚从主页更改后,该菜单向下切换;当锚是主页时,该菜单向后切换。这是因为主页上有内置菜单,因此不需要第二个菜单。
在手机上连续滚动后,此功能不起作用,但仍可在计算机浏览器上使用。我不知道我是否正在寻找某些东西,或者是否可以为菜单切换编写更好的脚本。请查看www.themeltingpotkitchen.com以了解我的意思。
这是我的菜单js。我要指出的是,如果您的Tap通过菜单链接,它将起作用,但不能通过滚动: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] 删除。
我来说两句