我正在开发一个包含HTML5,CSS3和jQuery的单页滚动(垂直)网站。它在PC或Android手机上运行良好。这是一个响应式设计。我在iphone面临问题。如果我单击顶部的菜单,它会滚动到该位置。但是,如果我然后触摸将页面滑动到另一个位置,它将返回到先前的位置。就像它粘在那个位置上一样。单击菜单始终有效,但触摸滚动不起作用。我没有在ipad上查看它。我也在使用航点。
这是我的html导航代码:
<nav>
<ul>
<li><a href="#why-us" title="Why us">Why us</a></li>
<li><a href="#how-we-do-it" title="How we do it">How we do it</a></li>
<li><a href="#what-we-do" title="What we do">What we do</a></li>
<li><a href="#workshops" title="Workshops">Workshops</a></li>
<li><a href="#contact" title="Contact">Contact</a></li>
</ul>
</nav>
这是我的jquery滚动脚本:
// SCROLLING NAVIGATION
$('nav ul li a, a#logo').bind('click',function(event){
$('nav ul li a').removeClass("active-nav");
$(this).addClass("active-nav");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo', function(){
$('nav#mobile-nav').slideUp();
});
event.preventDefault();
});
// WAYPOINTS
var sections = $("div.eachContainer");
var navigation_links = $("nav ul li a");
sections.waypoint({
handler: function(event, direction) {
var active_section;
active_section = $(this);
if (direction === "up") active_section = active_section.prev();
var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
navigation_links.removeClass("active-nav");
active_link.addClass("active-nav");
if(active_section.attr("id") == "why-us"){
}
},
offset: '25%'
});
任何人都可以给我一个解决方案吗?出于某种原因,我不能给你我的网站的URL。感谢。